jq怎么根据内容来获取元素?

Question

<div>123ABC</div>
<script>
    const str = '123ABC';
    // const el = ?
</script>

已知 const str , 如何获取到对应内容的div?

Answer 1

使用 `:contains(${str})` 是可以处理的，但是要注意两个问题

1. 所有包含指定内容的元素（含父元素）都会被找出来
2. 如果 str 中包含一些特殊字符，比如反括号等，会出问题

像这种直接三层元素包含了一个 Hello 的，哪怕是依次用 test().trim() === "hello" 都不能准确的找到某一个，还需要一些辅助算法来处理。具体如何处理要看你的需求。如果本身就是要所有祖先元素的，那就已经解决了。

如果只要直接包含的元素，还需要去的最里层元素。如果多层元素中都包含指定内容，还需要去找子节点并根据子节点的类型来做判断处理……

Answer 2

const el = $("div:contains(" + str + ")");

Answer 3

第一种：

const str = '123ABC';
const elArr = $(`div:contains(${str})`); // elArr是个数组

第二种：

// 或者另一种
let el = {}; 
const elArr = $('div');
for (let index = 0; index < elArr.length; index++) {
  const element = elArr[index];
  if ($(element).text() === str) {
    el = element;
    break;
  }
}

console.log(el)

Answer 4

以下代码可以获取包含特定内容的 <div> 元素：

const str = '123ABC';
const el = $('div:contains(' + str + ')');

选择包含指定内容的所有 <div> 元素，并将其存储在变量 el 中。

Answer 5

可以尝试用一下原生JavaScript中获取包含特定文本内容的div元素的常用方法。

const str = '123ABC';
let el;

Array.from(document.querySelectorAll('div')).forEach(div => {
    if (div.textContent.trim() === str) {
        el = div;
    }
});

这段代码会获取页面中所有的div元素，然后遍历它们，如果div的文本内容和str匹配，就把这个div赋值给el。注意这段代码只会返回第一个匹配的div元素。如果页面中有多个div的内容都是'123ABC'，那么el只会展示第一个。

当然，如果你想找到所有匹配的元素，可以使用filter方法来替代forEach。

const str = '123ABC';

const elements = Array.from(document.querySelectorAll('div'))
    .filter(div => div.textContent.trim() === str);

这段代码会返回一个数组，其中包含了所有文本内容匹配str的div元素。如果没有找到任何匹配的元素，那么这个数组将会是空的。