在 Javascript 中解析特定的 HTML 标签答案

【问题标题】：Parsing specific HTML tags in Javascript在 Javascript 中解析特定的 HTML 标签
【发布时间】：2011-10-23 21:36:37
【问题描述】：

我正在寻找 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

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

任何想法将不胜感激！

【问题讨论】：

你想要一个纯 javascript 解决方案还是一个 jQuery（或其他类似库）就足够了？
您想要的输出与您所说的想要做的不匹配。

标签： javascript parsing tags html-parsing

【解决方案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"

参考：

演示：

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

【讨论】：

【解决方案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"

这将第一组匹配为<h2>...</h2> 之间可能最短的(.*?) 字符串。

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

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

请注意，组不可访问。

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

只有当要解析的 HTML 已经在页面中的某个地方时才有效。