Extraer elemento por ID de cadena?

Tengo una cadena que contiene este text:

<!DOCTYPE html> <html> <head> <title>ExtractDiv test</title> </head> <body> <p>Apples and oranges</p> <div id="main"> <ul style="list-style-type: upper-roman"> <li>Äpfel</li> <li>Birnen</li> </ul> </div> <p>Men and women</p> </body> </html> 

Ahora necesito una function de JavaScript que me devuelva un elemento DOM con una ID específica como una cadena de este text, por ejemplo:

 function ExtractElementByIdFromString(HTMLString, IdString) { var ExtractedElement = ???(HTMLString, IdString); return ExtractedElement; } 

Entonces el RESULTADO de esta function en este caso sería:

 <div id="main"> <ul style="list-style-type: upper-roman"> <li>Äpfel</li> <li>Birnen</li> </ul> </div> 

es posible?

2 Solutions collect form web for “Extraer elemento por ID de cadena?”

Puede analizar una cadena HTML con el DOMParser nativo:

 var str = "<!DOCTYPE……………" // your HTML string var doc = new DOMParser().parseFromString(str, "text/html") 

Luego solo usa los methods regulares de DOM:

 console.log( doc.getElementById("main") ) 

Tenga en count que usar un DOMParser es más eficiente y más seguro que insert la cadena en algún lugar de innerHTML de su documento, porque solo se creará la estructura, los elementos <script> no se ejecutarán, las imágenes no se cargarán, CSS no intentará aplicar a él, no se realizará ninguna representación, etc.

Puede crear un elemento temporal, poner HTMLString como contenido en él, luego usar querySelector para get un elemento con id pasado. Algo como esto:

 function ExtractElementByIdFromString(HTMLString, IdString) { var result, temp = document.createElement('div'); // Create a temporary element temp.innerHTML = HTMLString; // Set the passed string as HTML to the temporary element result = temp.querySelector('#' + IdString).outerHTML; // Find an element with the passed id return result; } 

Una demostración funcional en jsFiddle .

  • encontrar índice de elemento agregado dinámicamente
  • Mostrar un map y resaltar ciertos países
  • alinee un canvas html en la parte superior absoluta de la página web
  • Cómo mostrar: ninguno entre las tags padre y hermano cuando se usa mostrar más mostrar less Jquery
  • parentNode se pierde en el cierre interno de Javascript? ¿Error de Chrome?
  • ¿Cuándo debería controlar el cambio de image de background con CSS vs Javascript?
  • ¿Hay alguna forma de evitar que una image se almacene en el lado del cliente?
  • jquery: mostrar el textbox cuando se marca la checkbox
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.