Extract element by ID from string?

Question

I have a string which contains this text:

Answer 1

You can create a temporary element, put the HTMLString as a content to it, then use querySelector to get an element with passed id. Something like this:

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;
}

A working demo at jsFiddle.

Answer 2

You can parse an HTML string with the native DOMParser:

var str = "<!DOCTYPE……………" // your HTML string

var doc = new DOMParser().parseFromString(str, "text/html")

Then just use regular DOM methods:

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

Note that using a DOMParser is more efficient and safer than inserting the string somewhere in your document's innerHTML, because only the structure will be created — <script> elements won't be executed, images won't be loaded, CSS will no try to apply to it, no rendering will occur, etc.