javascript - 如何选择 HTML 标签之间的某些文本而不是 anchor 标签

Question

我想要实现的目标是给定一个如下所示的 HTML 字符串:

<div>
  <p>Some text, some text <span> some text</span> <a href="xxx">some text 
  <span>ZZZ</span></a></p>
  <p>some text, some text, <span>ZZZ</span></p>
</div>
<div>
  <p>some text <span>ZZZ</span></p>
</div>

我需要找到第一个不在 <a> 中的匹配“ZZZ”标签 所以正确答案是上面HTML字符串中出现的第二个ZZZ

我目前正在使用 Cheerio JS，但不是循环遍历每个元素并尝试确定是否有 <a>亲们，有没有更简单的方法呢？

我尝试过正则表达式，如 <([\w]+)[^>]*>(.*?)ZZZ(.*?)<\/\1>并循环遍历所有实例以确定封装标签是否为 <a>或不。但我无法全神贯注地考虑嵌套标签。

Answer 1

我认为循环元素可能是更简单的方法......

let target = null;

// find the element that inner text is 'ZZZ' and not in an a tag
let find = e => 
  !target && (
    (e.innerText === 'ZZZ' && e.tagName !== 'A' && (target = e)) || 
    (e.tagName !== 'A' && e.childElementCount > 0 && [...e.children].forEach(find))
  );

[...document.body.children].forEach(find);

console.log(target);

<div>
  <p>Some text, some text <span> some text</span><a href="xxx">some text 
  <span id="1">ZZZ</span></a></p>
  <p>some text, some text, <span id="2">ZZZ</span></p>
</div>
<div>
  <p>some text <span id="3">ZZZ</span></p>
</div>