html - How do I parse this piece of innerHTML in JavaScript? - Stack Overflow

admin管理员组

文章数量:1295902

I did this:

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

Now I have this in bar:

<a class="title" href="/" 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?

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./" 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?

• javascript
• html
• innerhtml

Share Improve this question Follow asked Aug 1, 2014 at 13:40 AntrikshyAntrikshy 3,10655 gold badges3737 silver badges7171 bronze badges 6

• 2 so why are you not selecting the anchor? – epascarello Commented Aug 1, 2014 at 13:42
• 3 "Now I have this in bar" what bar? Does it have any spare beers? – PeeHaa Commented Aug 1, 2014 at 13:42
• getElementsByClassName('class') this trys to find an element with an attribute class="class" did you mean getElementsByClassName('title') – Patrick Evans Commented Aug 1, 2014 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 Commented Aug 1, 2014 at 13:44
• @PeeHaa I'm sorry. I meant blah. Or var. – Antrikshy Commented Aug 1, 2014 at 14:25

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 7

Basic HTML markup that I am assuming you have:

<div id="id">
    <div class="class">
        <a class="title" href="http://www.example./" 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;

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"

本文标签： htmlHow do I parse this piece of innerHTML in JavaScriptStack Overflow