使用javascript查找包含特定字符的元素

oalqel3c  于 2023-01-29  发布在  Java
关注(0)|答案(2)|浏览(268)

我想检测其中包含“_”字符的元素的父元素
这可以使用jquery和css3选择器“:contain”来实现,如下所示
$('.class a:contains("_")').parent()
但是我试图避免过多地使用jquery,那么有没有办法使用原生js来实现这一点呢

ohtdti5x

ohtdti5x1#

没有CSS来检查它是否包含文本。唯一可以进行文本匹配的方法是该文本是否碰巧在元素的属性中。因此,您必须选择所有父元素,并在文本/子元素的文本处循环。
要做到这一点,你可以选择所有的元素,并使用过滤器来检查文本。如果你只关心有一个下划线,你可以只文本的文本内容的元素。

const elemsWithUnderscore = [...document.querySelectorAll('.yourClass')].filter(el => el.textContent.includes('_'));

console.log(elemsWithUnderscore);
<div class="yourClass"><a>a</a></div>
<div class="yourClass"><a>b_</a></div>
<div class="yourClass"><a>c</a></div>
<div class="yourClass"><a>d_</a></div>
<div class="yourClass"><a>e</a></div>

如果它只能在锚标记中,并且存在一个锚标记,则可以选择锚标记。
一个二个一个一个
如果有多个锚点作为子锚点,那么您需要使用一些子锚点来查看其中一个是否有下划线。

const elemsWithUnderscore = [...document.querySelectorAll('.yourClass')].filter(el => el.querySelector('a')?.textContent.includes('_'));

console.log(elemsWithUnderscore);
<div class="yourClass">_<a>a</a></div>
<div class="yourClass"><a>b_</a></div>
<div class="yourClass"><a>c</a></div>
<div class="yourClass"><a>d_</a></div>
<div class="yourClass"><a>e</a></div>
k3fezbri

k3fezbri2#

您可以使用document.querySelectorAll并检查子对象的textContent

[...document.querySelectorAll('.class')].filter(el => 
  [...el.querySelectorAll('a')].some(a => a.textContent.includes('_')))
  .forEach(el => console.log(el.outerHTML));
<div class="class"><a>_</a></div>
<div class="class">
  <div><a>abc_def</a><span>123</span></div>
</div>
<div><a>nothing to see</a></div>

相关问题