我的字符串带有HTML代码。
<h2 class="some-class">
<a href="#link" class="link" id="first-link"
<span class="bold">link</span>
</a>
NEED TO GET THIS
</h2>
我只需要获得H2的文本内容。我创建此正则表达式:
(?<=>)(.*)(?=</h2>)
,如果H2没有内部标签,这很有用。否则我明白了:
<a href="#link" class="link" id="first-link"
<span class="bold">link</span>
</a>
NEED TO GET THIS
切勿使用正则义务解析HTML,请检查以下著名答案:
使用正则表达式解析html:为什么不呢?
REGEX匹配打开标签,XHTML自包式标签
相反,以html为html生成一个临时元素,并通过过滤文本节点获取内容。
var str = `<h2 class="some-class">
<a href="#link" class="link" id="first-link"
<span class="bold">link</span>
</a>
NEED TO GET THIS
</h2>`;
// generate a temporary DOM element
var temp = document.createElement('div');
// set content
temp.innerHTML = str;
// get the h2 element
var h2 = temp.querySelector('h2');
console.log(
// get all child nodes and convert into array
// for older browser use [].slice.call(h2...)
Array.from(h2.childNodes)
// iterate over elements
.map(function(e) {
// if text node then return the content, else return
// empty string
return e.nodeType === 3 ? e.textContent.trim() : '';
})
// join the string array
.join('')
// you can use reduce method instead of map
// .reduce(function(s, e) { return s + (e.nodeType === 3 ? e.textContent.trim() : ''); }, '')
)
参考:
将JavaScript Nodelist转换为数组的最快方法?
rgex不适合解析HTML,但是如果您的HTML无效或您喜欢使用Regex:
(?!>)([^><]+)(?=</h2>)
尝试演示
在关闭
</h2>
的标签之前,它将获得最后一段文字(如果存在)避免
null
结果将*
更改为+
。此正则是完全 limit ,并且适合有限的情况,如上所述。
demo
var h2 = document.querySelector('h2')
var h2_clone = h2.cloneNode(true)
for (let el of h2_clone.children) {
el.remove()
}
alert(h2_clone.innerText)