解析 Javascript 中的特定 HTML 标签

Question

我正在寻找 Javascript 来解析以下 HTML:

<p>random text random text random text random text</p>
<kbd><h2>Heading One</h2>Body text Body text Body text Body text</kbd>
<p>random text random text random text random text</p>

... 并仅返回:

Heading One

换句话说，我想从 标签中删除所有标签和正文文本。

任何想法将不胜感激！

Answer 1

var input = /* that HTML string here */;
var div = document.createElement('div');

div.innerHTML = input;

var h2 = div.getElementsByTagName('h2')[0];
var text = h2.innerText || h2.textContent;

alert(text); // alerts "Heading One"

参考：

• document.createElement
• innerHTML
• element.getElementsByTagName
• Node.textContent (Quirksmode 兼容性表）

演示：

• http://jsfiddle.net/mattball/vaVPF/

Answer 2

正则表达式？

var s = "<p>random text</p>\n" +
  "<kbd><h2>Heading One</h2>Body text</kbd>\n" +
  "<p>random text</p>";

s.match(/<h2>(.*?)<\/h2>/)[1] // == "Heading One"

这会将第一组匹配为

...

之间的最短可能的 (.*?) 字符串。

您可以使用 g 选项查找所有匹配项。

s.match(/<h2>(.*?)<\/h2>/g) // == ["<h2>Heading One</h2>"]

请注意，组不可访问。

对于标签之间的多行内容，请使用

s.match(/<tag>[\s\S]*?<\/tag>/ig)

Answer 3

如果你包含 jquery (jquery.com)，你可以这样做：

var heading=$("h2").html();