CODEWITHSUNDEEP
javascripthtmlinnerhtml
Antrikshy
Antrikshy

Reputation: 3106

How do I parse this piece of innerHTML in JavaScript?

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?

Upvotes: 3

Views: 9886

Answers (2)

epascarello
epascarello

Reputation: 207501

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;

Upvotes: 7

Sukima
Sukima

Reputation: 10064

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"

Upvotes: 0

Related Questions