How do I parse this piece of innerHTML in JavaScript?

Question

I did this:

var blah = document.getElementById('id').getElementsByClassName('class')[0].innerHTML;

Now I have this in bar:

<a class="title" href="http://www.example.com/" tabindex="1">Some text goes here</a> <span class="domain">(<a href="/domain/foobar.co.uk/">foobar.co.uk</a>)</span>

I want to read the string "Some text goes here" from the HTML using JS (no jQuery). I don't have access to the site's HTML. I'm parsing a webpage to inject JS for a browser extension.

Will I just have to parse it as a string and find my text from between > and < or is there a way to parse innerHTML in JS?

"Now I have this in bar" what bar? Does it have any spare beers? — PeeHaa, Aug 01 '14 at 13:42
`getElementsByClassName('class')` this trys to find an element with an attribute `class="class"` did you mean `getElementsByClassName('title')` — Patrick Evans, Aug 01 '14 at 13:43
Are you always going to be pulling text from an an anchor tag? If so, why not get it directly and access its `textContent`? — ajm, Aug 01 '14 at 13:44
@PatrickEvans I'm sorry. I hurriedly made the code simpler to read. The innerHTML was much more convoluted and most of the content didn't matter. — Antrikshy, Aug 01 '14 at 14:25

epascarello · Accepted Answer · 2014-08-01T13:50:47.043

7

Basic HTML markup that I am assuming you have:

<div id="id">
    <div class="class">
        <a class="title" href="http://www.example.com/" tabindex="1">Some text goes here</a> <span class="domain">(<a href="/domain/foobar.co.uk/">foobar.co.uk</a>)</span>
    </div>
</div>

So select the anchor and read the text

var theAnchorText = document.getElementById('id').getElementsByClassName('class')[0].getElementsByTagName("a")[0].textContent;

if you need to support IE8

var theAnchor = document.getElementById('id').getElementsByClassName('class')[0].getElementsByTagName("a")[0];
var theAnchorText = theAnchor.textContent || theAnchor.innerText;

and if you are using a modern browser, querySelector makes it a lot cleaner

var theAnchorText = document.querySelector("#id .class a").textContent;

edited Aug 01 '14 at 13:50

answered Aug 01 '14 at 13:43

epascarello

204,599
20
195
236

Was answering with something similar and this popped up – Ruan Mendes Aug 01 '14 at 13:44
where is the `id='id'` ?? – Khalid Aug 01 '14 at 13:45
1

@Khalid In the JavaScript part of the OP's question :p It's probably not a real ID, and the OP hasn't shown the containing HTML – Ruan Mendes Aug 01 '14 at 13:45
@PatrickEvans Why would you assume that? The OP selected the parent element and wants part of the text of a child element. – epascarello Aug 01 '14 at 13:54
Sorry, took _"Now I have this in bar:"_ meant something else and not that he misspelled `bar`, and had the string in his `blah` variable – Patrick Evans Aug 01 '14 at 13:57

score 0 · Answer 2 · answered Aug 01 '14 at 13:50

0

You could approach this two ways. A regexp or textContent on a temp DOM element:

var foo = "<b>bar</b>";

function regexpStrip(str) {
  return str.replace(/<[^>]*>/g, '');
}

function parseViaDOM(str) {
  var el = document.createElement('div');
  el.innerHTML = str;
  return el.textContent;
}

console.log(regexpStrip(foo)); // => "bar"
console.log(parseViaDOM(foo)); // => "bar"

answered Aug 01 '14 at 13:50

Sukima

9,965
3
46
60

1

Reg Exp with HTML NO NO NO! http://stackoverflow.com/questions/590747/using-regular-expressions-to-parse-html-why-not – epascarello Aug 01 '14 at 13:55
1

@epascarello: wrong link. This is the right one to answer this kind of questions: http://stackoverflow.com/a/1732454/648265 – ivan_pozdeev Aug 01 '14 at 14:12
Agreed, Regexp is bad in HTML. I was under the impression the sample string he gave above was all there was in which case a regexp strip would work. But for anything more regexp would be evil bad :imp: – Sukima Aug 01 '14 at 14:20
@ivan_pozdeev Ah, normally I google the right one, copied the url without looking :) – epascarello Aug 01 '14 at 14:30

How do I parse this piece of innerHTML in JavaScript?

2 Answers2