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
– john, Commented Jan 27, 2021 at 19:56
Have you seen this already ? - stackoverflow.com/questions/3103962/… — rootkonda
– rootkonda, Commented Jan 27, 2021 at 19:59

Rajan · Accepted Answer · 2021-01-27 20:08:20Z

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, 2021 at 20:08

answered Jan 27, 2021 at 20:01

Rajan

1,49714 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marcos · Accepted Answer · 2021-01-28 00:46:19Z

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, 2021 at 0:46

answered Jan 27, 2021 at 20:00

marcos

4,5101 gold badge13 silver badges26 bronze badges

Collectives™ on Stack Overflow

Get element by xpath on HTML string

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related