Get element by xpath on HTML string

Question

I have a JS variable that contains an a string that represents an HTML page. For example:

var response = "<!DOCTYPE html><html><body><h1>This is heading 1</h1></body></html>"

I'd like to perform query selectors and xpath evaluations on this response to traverse through the HTML elements. Since the response is not in the DOM I can't use document.x actions.

One option is to write it into an invisible iframe in the DOM but this is not allowed for Chrome extensions. Are there any other alternatives?

Thanks for the suggestion @rootkonda I was hoping for a cleaner approach, but that will be my last resort — john, Jan 27 '21 at 19:56
Have you seen this already ? - https://stackoverflow.com/questions/3103962/converting-html-string-into-dom-elements — rootkonda, Jan 27 '21 at 19:59

marcos · Answer 1 · 2021-01-28T00:46:19.760

3

You can use DOMparser to achieve that for example:

const response = "<!DOCTYPE html><html><body><h1>This is heading 1</h1></body></html>"
const parser = new DOMParser();
const parsedHtml = parser.parseFromString(response, 'text/html');

And process it as normal DOM components.

edited Jan 28 '21 at 00:46

answered Jan 27 '21 at 20:00

marcos

4,473
1
10
24

Rajan · Accepted Answer · 2021-01-27T20:08:20.977

3

Use can use DOMParser

var response = "<!DOCTYPE html><html><body><h1>This is heading 1</h1></body></html>";
var dom = new DOMParser().parseFromString(response, 'text/html');
// Example
console.log(dom.querySelector('h1').textContent);

edited Jan 27 '21 at 20:08

answered Jan 27 '21 at 20:01

Rajan

1,463
12
26

Get element by xpath on HTML string

2 Answers2