使用jQuery查找文本字符串？

Question

假设一个网页有一个字符串，例如“我是一个简单的字符串”，我想找到它。我将如何使用 JQuery 来解决这个问题？

Answer 1

jQuery 有 contains 方法。这是给你的sn-p：

<script type="text/javascript">
$(function() {
    var foundin = $('*:contains("I am a simple string")');
});
</script>

上面的选择器选择包含目标字符串的任何元素。 foundin 将是一个包含任何匹配元素的 jQuery 对象。参见 API 信息：https://api.jquery.com/contains-selector/

使用“*”通配符需要注意的一点是，您将获得所有元素，包括您的 html 和 body 元素，这可能是您不想要的。这就是为什么 jQuery 和其他地方的大多数示例都使用 $('div:contains("I am a simple string")')

Answer 2

通常 jQuery 选择器不会在 DOM 中的“文本节点”内进行搜索。但是如果使用 .contents() 函数会包含文本节点，那么可以使用 nodeType 属性仅过滤文本节点，使用 nodeValue 属性搜索文本字符串。

$('*', '正文') .andSelf() 。内容（） .filter（函数（）{ 返回 this.nodeType === 3; }) .filter（函数（）{ // 仅当文本中任何位置包含“简单字符串”时才匹配 return this.nodeValue.indexOf('simple string') != -1; }) .每个（函数（）{ // 用 this.nodeValue 做点什么 });

Answer 3

这将只选择包含“I am a simple string”的叶子元素。

$('*:contains("I am a simple string")').each(function(){
     if($(this).children().length < 1) 
          $(this).css("border","solid 2px red") });

将以下内容粘贴到地址栏中进行测试。

javascript: $('*:contains("I am a simple string")').each(function(){ if($(this).children().length < 1) $(this).css("border","solid 2px red") }); return false;

如果你只想获取“我是一个简单的字符串”。首先将文本包装在这样的元素中。

$('*:contains("I am a simple string")').each(function(){
     if($(this).children().length < 1) 
          $(this).html( 
               $(this).text().replace(
                    /"I am a simple string"/
                    ,'<span containsStringImLookingFor="true">"I am a simple string"</span>' 
               )  
           ) 
});

然后执行此操作。

$('*[containsStringImLookingFor]').css("border","solid 2px red");

Answer 4

如果您只想要最接近您正在搜索的文本的节点，您可以使用：

$('*:contains("my text"):last');

如果你的 HTML 看起来像这样，这甚至可以工作：

<p> blah blah <strong>my <em>text</em></strong></p>

使用上面的选择器将找到<strong> 标签，因为这是包含整个字符串的最后一个标签。

Answer 5

看看highlight（jQuery插件）。

Answer 6

只是添加到托尼米勒的答案，因为这让我对我正在寻找的东西有 90% 的了解，但仍然没有工作。在他的代码末尾添加.length > 0; 可以让我的脚本正常工作。

 $(function() {
    var foundin = $('*:contains("I am a simple string")').length > 0;
 });

Answer 7

这个功能应该可以工作。基本上是进行递归查找，直到我们得到一个不同的叶节点列表。

function distinctNodes(search, element) {
    var d, e, ef;
    e = [];
    ef = [];

    if (element) {
        d = $(":contains(\""+ search + "\"):not(script)", element);
    }
    else {
            d = $(":contains(\""+ search + "\"):not(script)");
    }

    if (d.length == 1) {
            e.push(d[0]);
    }
    else {
        d.each(function () {
            var i, r = distinctNodes(search, this);
            if (r.length === 0) {
                e.push(this);
            }
            else {
                for (i = 0; i < r.length; ++i) {
                    e.push(r[i]);
                }
            }
        });
    }
    $.each(e, function () {
        for (var i = 0; i < ef.length; ++i) {
            if (this === ef[i]) return;
        }
        ef.push(this);
    });
    return ef;
}