REGEXP.仅获取标签的文本内容(没有内部标签)



我的字符串带有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)

相关内容

  • 没有找到相关文章

最新更新