解析Javascript中的特定HTML標記

Question

我正在尋找可解析以下HTML的Javascript：

<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>標簽中剝離所有標簽和正文。

任何想法將不勝感激！

Answer 1

正則表達式？

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"

這會將組1匹配為<h2>...</h2>之間的最短(.*?)字符串。

您可以使用g選項找到所有匹配項。

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

請注意，無法訪問組。

對於標簽之間的多行內容，請使用

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

Answer 2

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 3

如果包含jquery（ jquery.com ），則可以執行以下操作：

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