What is the easiest way for navigating through a DOMString?

Question

Suppose I have a DOMString which is of kind

"<!DOCTYPE html><html><div id="d1"><p>foo</p></div></html>"

and I want to store the paragraph content in a variable (say, pContent), such that

pContent == "foo"

What do you suggest me? I can use only javascript-code (and libraries entirely written in .js if needed).

BenM · Answer 1 · 2014-03-18T22:40:22.117

2

Well, since you mentioned the use of libraries, you can pass the contents of your string to jQuery and extract the tree. For example:

var myString = '<!DOCTYPE html><html><div id="d1"><p>foo</p></div></html>',
    $myString = $(myString),
    para = $myString.find('p').text();

Your variable para now contains the string foo.

edited Mar 18 '14 at 22:40

answered Mar 18 '14 at 16:14

BenM

51,470
24
115
164

I think you meant `$myString = $( myString )`, right? btw, I wish your suggestion could work, but seems like it's not. Am I wrong? – Giuseppe Crinò Mar 18 '14 at 17:01
Thanks, I did indeed mean `$(myString)`. – BenM Mar 18 '14 at 18:08
Yet the rest of the piece is right? Can you test it again? I can't get it working... – Giuseppe Crinò Mar 18 '14 at 18:27
The return value from $(myString) is div#d1, your find query should simply be .find('p'). Like this `$('
foo
').find('p').text();` – Preston S Mar 18 '14 at 19:22

score 0 · Answer 2 · answered Mar 18 '14 at 16:23

Using plain JS:

var str = '<!DOCTYPE html><html><div id="d1"><p>foo</p></div></html>';

var htmlWrapper = document.createElement('html');
htmlWrapper.innerHTML = str;
var pNodes = htmlWrapper.getElementsByTagName('p');

pContent = pNodes[0].innerText || pNodes[0].textContent;

JSFiddle

Although, JQuery would be a better solution but adds a lot of functionality you may not need.

What is the easiest way for navigating through a DOMString?

2 Answers2