Parsing html in innerHTML using javascript or jquery

Question

How to get id and parse to get its number after getting the innerhtml like 3 examples below:-

var myIHTML = cell[0].innerHTML;

myIHTML = '<input type="submit" name="pic" value="Preview" /><div id="allItems1" style="display: none;"></div>' ;
or
myIHTML = '<input type="submit" name="pic" value="Preview" /><div id="allItems2" style="display: none;"></div>';
or
myIHTML ='<input type="submit" name="pic" value="Preview" /><div id="allItems11" style="display: none;"></div>'

I like to get the number from allItems id. like 1, 2, 11 etc.

What do you mean by parse? Do you mean to convert your string into HTML? — evolutionxbox
– evolutionxbox, Commented Aug 11, 2016 at 13:12
no, I mean to extract the value. it doesnt matter if i get it in string or number. See my question at last line "I like to get the number from allItems id. like 1, 2, 11 etc" — AKS
– AKS, Commented Aug 11, 2016 at 13:12
Why would you parse it, when you can get it directly from the DOM? var value = cell[0].querySelector('div').id.replace('allItems','') will give you what you want. — blex
– blex, Commented Aug 11, 2016 at 13:14
You then want to get the ID, cell.querySelector('[id^=allItems]').id.replace('allItems','') — evolutionxbox
– evolutionxbox, Commented Aug 11, 2016 at 13:14
Thanks blex, I got the inner part of html so fast :) .evolutionxbox, your comment gives exactly what I am trying to get in simple way. Thank you, if that was in answer, i would have selected this as answer instead of just upvote. The below answers are now alternatives and will select one of those. Thanks again , you guys rocks :) — AKS
– AKS, Commented Aug 12, 2016 at 5:44

metal03326 · Accepted Answer · 2016-08-11 13:20:27Z

2

You can get your innerHTML back to DOM, so you can search in it and then parse the id. Here is an example:

// Create a div to insert back the contents into
var div = document.createElement('div');

// Insert the contents back
div.innerHTML = '<input type="submit" name="pic" value="Preview" /><div id="allItems1" style="display: none;"></div>';

// Get the element with id starting with allItems
var id = div.querySelector('[id^="allItems"]').id;

// Get the number by replacing non-digits with empty character and then converting the string to integer
console.log( 'Number from id is', parseInt( id.replace ( /[^\d.]/g, '' ) ) );

answered Aug 11, 2016 at 13:20

metal03326

1,2632 gold badges13 silver badges15 bronze badges

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

3 Comments

AKS Over a year ago

Thanks your solution, a bit longer but also worked :) . The simple one is what evolutionxbox suggest above in comments. Selecting your reply as answer as it also give what I am looking for and evolutionxbox answer is in comment.

metal03326 Over a year ago

I thought you don't have access anymore to cell - in your question you say "How to get id and parse to get its number after getting the innerhtml like 3 examples below" and that's why I re-create the innerHTML again in DOM. If you still have it, of course it's better (and faster) to directly use it. @AKS

AKS Over a year ago

It makes sense now. thanks for clarification. I understood this aspect now :)

Sinan Guclu · Accepted Answer · 2016-08-11 13:26:15Z

0

You can use jQuery to parse the string:

var elems = $(myIHTML);

Then select the elements within using filter():

var alItems2Elem = elems.filter('#allItems2');

To get the number from the id of the div:

var alItemsId = elems.filter('div').attr('id').replace('allItems', '');

Here is a Codepen

2 Comments

AKS Over a year ago

I dont know what is there in filter as it is dynamic and i given couple of samples. elems.filter('#allItems2'); The allItems2 is what i dont know and get it at run time and I need to find/filter 2 in allItems2 . The answer by evolutionxbox is what I was looking for. Anyway thanks for help.

Sinan Guclu Over a year ago

The third example jdoes what the accepted answer does but with a single line of jquery, notice it filters('div')s ou could use filter('[id^="allItems"]') aswell for the same result.

Collectives™ on Stack Overflow

Parsing html in innerHTML using javascript or jquery

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related