Comment faire des éléments de liste dans le tableau javascript

Question

J'ai une variable qui contient du HTML. Ce HTML n'est pas sur le corps du document - seulement dans la variable! De cela, je veux extraire le contenu de chaque li et le mettre dans un tableau, afin que je puisse faire quelque chose de nouveau avec chaque élément de la liste.

Puis-je faire quelque chose comme ça?

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

Merci de votre visite!

Answer 1

Vous pouvez créer un élément factice et définir la innerHTML de cet élément comme la chaîne HTML que vous avez:

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')); 

Notez cependant que le résultat de getElementsByTagName est pas un tableau, mais un nodeList, un objet semblable à un tableau. Vous pouvez toujours exécuter une boucle à travers le nodeList pour créer un tableau réel.

Answer 2

Vous ne pouvez pas utiliser getElementByTagName sur une chaîne ... uniquement sur les éléments HTML insérés dans le document. Mais pour ce que vous essayez d'accomplir, vous n'avez pas vraiment besoin de faire cela. Vous pouvez utiliser une expression rationnelle pour extraire tous les <li> s de votre chaîne:

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

qui produira un tableau comme celui-ci:

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

Pour se débarrasser des <li> et </li> supplémentaire que vous pouvez faire chaîne remplacer comme vous bouclez chaque élément:

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