javascript - parser - Analizar una cadena HTML con JS
string to html javascript (7)
Crea un elemento DOM ficticio y agrega la cadena a él. Entonces, puedes manipularlo como cualquier elemento DOM.
var el = document.createElement( ''html'' );
el.innerHTML = "<html><head><title>titleTest</title></head><body><a href=''test0''>test01</a><a href=''test1''>test02</a><a href=''test2''>test03</a></body></html>";
el.getElementsByTagName( ''a'' ); // Live NodeList of your anchor elements
Editar: ¡agregando una respuesta jQuery para complacer a los fanáticos!
var el = $( ''<div></div>'' );
el.html("<html><head><title>titleTest</title></head><body><a href=''test0''>test01</a><a href=''test1''>test02</a><a href=''test2''>test03</a></body></html>");
$(''a'', el) // All the anchor elements
Busqué una solución pero nada era relevante, así que aquí está mi problema:
Quiero analizar una cadena que contiene texto HTML. Quiero hacerlo en JavaScript.
Intenté esta biblioteca pero parece que analiza el HTML de mi página actual, no de una cadena. Porque cuando pruebo el código a continuación, cambia el título de mi página:
var parser = new HTMLtoDOM("<html><head><title>titleTest</title></head><body><a href=''test0''>test01</a><a href=''test1''>test02</a><a href=''test2''>test03</a></body></html>", document);
Mi objetivo es extraer enlaces de una página externa HTML que leo como una cadena.
¿Conoces una API para hacerlo?
EDITAR: La solución a continuación es solo para HTML "fragmentos" ya que html, head y body se eliminan. Supongo que la solución para esta pregunta es el método parseFromString () de DOMParser.
Para los fragmentos HTML, las soluciones enumeradas aquí funcionan para la mayoría de HTML, sin embargo, en ciertos casos no funcionará.
Por ejemplo, intente analizar <td>Test</td> . Éste no funcionará en la solución div.innerHTML ni en la solución DOMParser.prototype.parseFromString ni range.createContextualFragment. La etiqueta td se pierde y solo queda el texto.
Solo jQuery maneja bien ese caso.
Entonces, la solución futura (MS Edge 13+) es usar una etiqueta de plantilla:
function parseHTML(html) {
var t = document.createElement(''template'');
t.innerHTML = html;
return t.content.cloneNode(true);
}
var documentFragment = parseHTML(''<td>Test</td>'');
Para los navegadores más antiguos, he extraído el método parseHTML () de jQuery en una esencia independiente - https://gist.github.com/Munawwar/6e6362dbdf77c7865a99
Es bastante simple:
parser=new DOMParser();
htmlDoc=parser.parseFromString(txt, "text/html");
// do whatever you want with htmlDoc.getElementsByTagName(''a'');
De acuerdo con MDN , para hacer esto en Chrome debe analizar como XML de esta manera:
parser=new DOMParser();
htmlDoc=parser.parseFromString(txt, "text/xml");
// do whatever you want with htmlDoc.getElementsByTagName(''a'');
Actualmente no está soportado por webkit y usted debería seguir la respuesta de Florian, y se desconoce su funcionamiento en la mayoría de los casos en los navegadores móviles.
Editar: ahora ampliamente compatible
La forma más rápida de analizar HTML en Chrome y Firefox es Range # createContextualFragment:
var range = document.createRange();
range.selectNode(document.body); // required in Safari
var fragment = range.createContextualFragment(''<h1>html...</h1>'');
var firstNode = fragment.firstChild;
Yo recomendaría crear una función auxiliar que use createContextualFragment si está disponible y que vuelva a innerHTML en caso contrario.
Punto de referencia: http://jsperf.com/domparser-vs-createelement-innerhtml/3
La siguiente función parseHTML devolverá:
un
Documentcuando su archivo comienza con un doctype.un
DocumentFragmentcuando su archivo no comienza con un doctype.
El código :
function parseHTML(markup) {
if (markup.toLowerCase().trim().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;
}
}
Cómo utilizar :
var links = parseHTML(''<!doctype html><html><head></head><body><a>Link 1</a><a>Link 2</a></body></html>'').getElementsByTagName(''a'');
Si está abierto a usar jQuery, tiene algunas buenas instalaciones para crear elementos DOM separados de cadenas de HTML. Estos pueden ser consultados a través de los medios habituales, por ejemplo:
var html = "<html><head><title>titleTest</title></head><body><a href=''test0''>test01</a><a href=''test1''>test02</a><a href=''test2''>test03</a></body></html>";
var anchors = $(''<div/>'').append(html).find(''a'').get();
Editar - solo vi la respuesta de @ Florian que es correcta. Esto es básicamente lo que dijo, pero con jQuery.
var $doc = new DOMParser().parseFromString($html, "text/html");
$As = $(''a'', $doc);