div：包含无效的选择器

【问题标题】：div:contains not a valid selectordiv：包含无效的选择器
【发布时间】：2017-08-10 03:29:11
【问题描述】：

我关注 this example 并输入了 $( "div:contains('John')" ).css( "text-decoration", "underline" ); ，但出现异常：

VM23376:1 未捕获的 DOMException：无法在“CommandLineAPI”上执行“$”：“div:contains('John')”不是有效的选择器。

【问题讨论】：

贴出你的代码
如果你在
中有任何元素，那么改变选择器。假设您在
中有
标签，然后将选择器更改为 $( "div p:contains('John')" ).css( "text-decoration", "underline" );
@Gayathri：这不应该有所作为（除了可能需要更多的工作），因为祖先 <div> 仍将包含所需的字符串。
@gyre 如果没有加载 jQuery，错误是 "'$' is undefined"，OP 似乎不同
jQuery 已加载。这是一个 jQuery 解析器错误

【解决方案1】：

你可以使用 JS vanilla 来做到这一点：

function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return Array.from(elements).filter(function(element) {
    return RegExp(text).test(element.textContent);
  });
}

// Run Code
let found = contains('span', 'Find');
// You can also search with regex
found = contains('span', 'Find\\s*[A-Za-z]+');

for (let i = 0; i < found.length; i++) {
  let elem = found[i];
  elem.style.backgroundColor = 'red';
}

&lt;p&gt;Some text where you have span tag that said &lt;span&gt;Find Me&lt;/span&gt;&lt;/p&gt;

【讨论】：

【解决方案2】：

我猜这是复制粘贴问题。 OP 键入 'div:contains('John')' 而不是 "div:contains('John')"。正确复制粘贴的代码没有任何问题。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contains demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
 
<script>
$( "div:contains('John')" ).css( "text-decoration", "underline" );
</script>
 
</body>
</html>

【讨论】：

【解决方案3】：

解决方法： 改为手动按文本过滤元素：

$('div').filter(function(element){
    return $(element).text().includes('John')
}).css('text-decoration', 'underline' )

【讨论】：

这如何回答 'div:contains('John')' is not a valid selector？ ...在 OP 的代码可用之前，没有办法知道出了什么问题，在此之前的任何答案都将是一个幸运的猜测，我们不会在这里猜测，除非您将其作为评论发布
嗯，为什么在使用给定选择器没有任何问题的情况下使用过滤器会遇到所有麻烦？？
我更新了答案，声明这是一个“试试这个”答案
我想说的是，这里的问题是我们看不到的部分，因此没有答案，所以除了幸运的猜测之外什么都可以

【解决方案4】：

您可以将该字符串存储在一个变量中，并在 contains 中调用该变量。请看看这个。希望这会对你有所帮助。

var name = "John";
$( "div:contains(name)" ).css( "text-decoration", "underline" );

【讨论】：

您在此处使用name 的方式将被读取为字符串，而不是变量。这将尝试选择div:contains(name)，而不是div:contains(John)。