Fetch HTML element value from json stingrigy value using Javascript

Question

I have object which i have converted using JSON.stingrify

{
  "_originalElementInner": "            <input type=\"file\" name=\"\" class=\"hidden\" id=\"file_input_two\" onchange=\"alertFilename(this.value,'cropped_two');\">                           <!-- <img src=\"https://dxyz.com/tmp/5bd432ed2d8dd_img3.jpg\" alt=\"\" width=\"100%\" height=\"100%\"> -->                                         "
}

From above i want to fetch "cropped_two", which is on

onchange=\"alertFilename(this.value,'cropped_two');

Here this.value will remain same, so if in case want to split the string .

I have tried via multiple ways by looping and other but in vain.

Anyone can help ? Thanks in advance.

I think you are going to have to try to restate your question. It's not clear what you are attempting to do. — Will
– Will, Commented Oct 31, 2018 at 1:57
What i really want to do is, I have that array above which is having HTML inside. Now from that array of HTML string, i want to get 2nd value of onchange=\"alertFilename(this.value,'cropped_two'); i.e. 'cropped_two' I want to get this value. — The N World
– The N World, Commented Oct 31, 2018 at 1:58
Will this be executed through a browser? and is it possible to use jQuery? — Ele
– Ele, Commented Oct 31, 2018 at 1:59

Will · Accepted Answer · 2018-10-31 02:21:34Z

1

I think you just want the string? I guess this would work.

let o = {
  "_originalElementInner": "            <input type=\"file\" name=\"\" class=\"hidden\" id=\"file_input_two\" onchange=\"alertFilename(this.value,'cropped_two');\">                           <!-- <img src=\"https://dxyz.com/tmp/5bd432ed2d8dd_img3.jpg\" alt=\"\" width=\"100%\" height=\"100%\"> -->                                         "
};
const regex = /,(.*)\);/gm;
const match = regex.exec(o._originalElementInner);
console.log(match[1]);

answered Oct 31, 2018 at 2:21

Will

3,2411 gold badge20 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lyes · Accepted Answer · 2018-10-31 02:06:07Z

0

you can use a search function to find "this.value" position, then use substring function from "this.value" position + 11 to the position of ")" witch seems to be the only ")" in the string.

answered Oct 31, 2018 at 2:06

Lyes

4775 silver badges21 bronze badges

Comments

Ele · Accepted Answer · 2018-10-31 02:11:08Z

0

If it is possible to use jQuery, you can follow this approach.

var obj = {"_originalElementInner": "            <input type=\"file\" name=\"\" class=\"hidden\" id=\"file_input_two\" onchange=\"alertFilename(this.value,'cropped_two');\">                           <!-- <img src=\"https://dxyz.com/tmp/5bd432ed2d8dd_img3.jpg\" alt=\"\" width=\"100%\" height=\"100%\"> -->                                 "},
    stringValue = '',
    // This function will be called when the event change is triggered.
    alertFilename = function(_, str) { stringValue = str;};

// Create the jQuery object and trigger the event change
// Finally remove the function from window object (This is just to remove an unsed function after execute it).
$(obj['_originalElementInner']).trigger('change'), (delete window['alertFilename']);

console.log(stringValue);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Oct 31, 2018 at 2:11

Ele

33.8k7 gold badges43 silver badges80 bronze badges

1 Comment

The N World Over a year ago

Thank you Ele, this also works but Will's answer is simple javascript :) but this is also new for me. :)

Karl.S · Accepted Answer · 2018-11-24 00:31:30Z

If there could be several onchange callbacks in your code, the following code will get the one that refers to alertFilename, it is also faster than regexp.

function extractSecondArg(text) {
  // Define the pattern to look for.
  const pattern = 'onchange=\"alertFilename(this.value,'

  // Find the index of the pattern.
  const patternIndex = text.indexOf(pattern);

  if (patternIndex !== -1) {
    // Find the closing parenthesis.
    const patternEnd = ');';
    const patternEndIndex = text.indexOf(patternEnd, patternIndex);

    // Extract the second argument of the function.
    return text.substring(patternIndex + pattern.length, patternEndIndex).replace(/["']+/g, '');
  }
}

Here is an example of how to use it.

const json = {
  "_originalElementInner": "            <input type=\"file\" name=\"\" class=\"hidden\" id=\"file_input_two\" onchange=\"alertFilename(this.value,'cropped_two');\">                           <!-- <img src=\"https://dxyz.com/tmp/5bd432ed2d8dd_img3.jpg\" alt=\"\" width=\"100%\" height=\"100%\"> -->                                         "
};

// Extract element to search in.
const secondArg = extractSecondArg(json['_originalElementInner']);
console.log(secondArg)

Collectives™ on Stack Overflow

Fetch HTML element value from json stingrigy value using Javascript

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related