Analyser une chaîne HTML avec JS

J’ai cherché une solution mais rien n’était pertinent, voici mon problème:

Je veux parsingr une chaîne qui contient du texte HTML. Je veux le faire en JavaScript.

J’ai essayé cette bibliothèque mais il semble qu’elle parsing le code HTML de ma page actuelle, pas d’une chaîne. Parce que quand j’essaie le code ci-dessous, cela change le titre de ma page:

var parser = new HTMLtoDOM("titleTesthttps://stackoverflow.com/questions/10585029/parse-an-html-string-with-js/test01https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js/test02https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js/test03", document); 

Mon but est d’extraire des liens d’une page externe HTML que je lis comme une chaîne.

Connaissez-vous une API pour le faire?

Créez un élément DOM factice et ajoutez-y la chaîne. Ensuite, vous pouvez le manipuler comme n’importe quel élément DOM.

 var el = document.createElement( 'html' ); el.innerHTML = "titleTesthttps://stackoverflow.com/questions/10585029/parse-an-html-string-with-js/test01https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js/test02https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js/test03"; el.getElementsByTagName( 'a' ); // Live NodeList of your anchor elements 

Edit: append une réponse jQuery pour faire plaisir aux fans!

 var el = $( '
' ); el.html("titleTesthttps://stackoverflow.com/questions/10585029/parse-an-html-string-with-js/test01https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js/test02https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js/test03"); $('a', el) // All the anchor elements

C’est assez simple:

 parser=new DOMParser(); htmlDoc=parser.parseFromSsortingng(txt, "text/html"); // do whatever you want with htmlDoc.getElementsByTagName('a'); 

Selon MDN , pour ce faire en chrome, vous devez parsingr le code XML comme suit:

 parser=new DOMParser(); htmlDoc=parser.parseFromSsortingng(txt, "text/xml"); // do whatever you want with htmlDoc.getElementsByTagName('a'); 

Il n’est actuellement pas pris en charge par webkit et vous devez suivre la réponse de Florian, et il est inconnu de travailler dans la plupart des cas sur les navigateurs mobiles.

Edit: maintenant largement pris en charge

EDIT: La solution ci-dessous ne concerne que les “fragments” HTML, car le HTML, la tête et le corps sont supprimés. Je suppose que la solution à cette question est la méthode parseFromSsortingng () de DOMParser.


Pour les fragments HTML, les solutions répertoriées ici fonctionnent pour la plupart des fichiers HTML, mais dans certains cas, cela ne fonctionnera pas.

Par exemple, essayez d’parsingr

Test

. Celui-ci ne fonctionnera pas sur la solution div.innerHTML, ni sur la solution DOMParser.prototype.parseFromSsortingng ni la solution range.createContextualFragment. La balise td disparaît et seul le texte rest.

Seul jQuery gère bien ce cas.

La future solution (MS Edge 13+) consiste donc à utiliser la balise template:

 function parseHTML(html) { var t = document.createElement('template'); t.innerHTML = html; return t.content.cloneNode(true); } var documentFragment = parseHTML('Test'); 

Pour les navigateurs plus anciens, j’ai extrait la méthode parseHTML () de jQuery dans un gist indépendant – https://gist.github.com/Munawwar/6e6362dbdf77c7865a99

 var $doc = new DOMParser().parseFromSsortingng($html, "text/html"); $As = $('a', $doc); 

Le moyen le plus rapide d’parsingr le HTML dans Chrome et Firefox est Range # createContextualFragment:

 var range = document.createRange(); range.selectNode(document.body); // required in Safari var fragment = range.createContextualFragment('

html...

'); var firstNode = fragment.firstChild;

Je recommanderais de créer une fonction d’assistance qui utilise createContextualFragment si disponible et se rabat sur innerHTML sinon.

Benchmark: http://jsperf.com/domparser-vs-createelement-innerhtml/3

La fonction suivante parseHTML retournera soit:

  • un Document lorsque votre fichier commence par un doctype.

  • un DocumentFragment lorsque votre fichier ne commence pas par un doctype.


Le code :

 function parseHTML(markup) { if (markup.toLowerCase().sortingm().indexOf('< !doctype') === 0) { var doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else if ('content' in document.createElement('template')) { // Template tag exists! var el = document.createElement('template'); el.innerHTML = markup; return el.content; } else { // Template tag doesn't exist! var docfrag = document.createDocumentFragment(); var el = document.createElement('body'); el.innerHTML = markup; for (i = 0; 0 < el.childNodes.length;) { docfrag.appendChild(el.childNodes[i]); } return docfrag; } } 

Comment utiliser :

 var links = parseHTML('< !doctype html>Link 1Link 2').getElementsByTagName('a'); 

Si vous êtes ouvert à l’utilisation de jQuery, il comporte de nombreuses fonctionnalités pour créer des éléments DOM détachés à partir de chaînes HTML. Ceux-ci peuvent alors être interrogés par les moyens habituels, par exemple:

 var html = "titleTesthttps://stackoverflow.com/questions/10585029/parse-an-html-string-with-js/test01https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js/test02https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js/test03"; var anchors = $('
').append(html).find('a').get();

Edit – vient de voir la réponse de @ Florian qui est correcte. C’est fondamentalement exactement ce qu’il a dit, mais avec jQuery.