如何将列表项放入javascript数组中

Question

I have a variable which contains some HTML. This HTML is not on the document body - only in the variable! From this, I want to extract the contents of each li and put it into an array, so that I can make something new with each list item.

Can I do something like this?

var myList = "<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>";
myList.getElementByTagName('LI') = myLiContents;

Thanks for looking!

Answer 1

You can create a dummy element and set the innerHTML of that element as the HTML string you have:

var myList = "<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>",
    dummy = document.createElement('div');

dummy.innerHTML = myList;
console.log(dummy.getElementsByTagName('li'));

Note however that the result of getElementsByTagName is not an array, but a nodeList , an array-like object. You can still run a loop through the nodeList to create a real array though.

Answer 2

You can't use getElementByTagName on a string... only on HTML elements inserted into the document. But for what you're trying to achieve, you don't really need to do that. You can use a regexp to extract all the <li> s from your string:

var li = myList.match(/<li>.*?<\/li>/gi);

Which will produce an array like this:

["<li>item 1</li>", "<li>item 2</li>", "<li>item 3</li>"]

To get rid of the extra <li> and </li> you can do a string replace as you're looping through each item:

li[i].replace(/<\/?li>/gi, "");