Jquery 在 DOM 中查找字符串并获取他的元素

Question

我有办法从 DOM 包含一些字符串的对象中获取元素吗？我正在尝试：

$( "*:contains('searchedString')" ).first().text( "test" );

或

$( "*:contains('searchedString')" ).text( "test" );

但是这个 returns <html> 对象所以在执行整个内容后消失并且在屏幕上只显示 test。

编辑：

我需要在整个文档中搜索，因此 * 选择器...
DOM 类型可以是 h2, div, 等..

Answer 1

使用 * 获取所有内容将始终包含 <html> 标记。

要获取最深的元素，您可以使用 jQuery .last() 方法获取选择器找到的最后一个元素：

<div><span>test</span></div>

let deepestElement = $("*:contains('test')").last();
console.log(deepestElement);

这是一个有效的 JSFiddle：https://jsfiddle.net/Zenoo0/ryjtwdqb/2/

Answer 2

你可以得到所有没有child的结果如下：

var result = $( "*:contains('searchedString'):not(:has(*))" ).text( "test" );
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>searchedString</span>
</div>

或者您可以使用标签限制选择器以避免出现您不想要的结果。

您可以使用 filter 获取有用的部分。

var tags = ['div', 'p', 'span'];
var str = "";
var result = $(tags.join(',')).filter(':contains("searchedString")');
console.log(result.length);
// ... filter result or something

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>searchedString</span>
</div>

Answer 3

$( "h1,h2,div:contains(searchStrinng)" ).first().text( "test" );
$( "h1,h2,div:contains(searchStrinng)" ).text( "test" );

Example:
<h1>Hello</h1>
<h2>Hello</h2>

- For first element (include only h1,h2,div) 
$( "h1,h2,div:contains(Hello)" ).first().text( "test" );

- For all element(include only h1,h2,div)
$( "h1,h2,div:contains(Hello)" ).text( "test" );

Jquery 在 DOM 中查找字符串并获取他的元素

Jquery find string in DOM and get his element

javascript

jquery

dom

contain