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?

Answer 1

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;