使用jQuery查找文本字符串?

Kei*_*gan 240 jquery text

假设网页上有一个字符串,例如"我是一个简单的字符串",我想找到它.我将如何使用JQuery进行此操作?

Ton*_*ler 326

jQuery有contains方法.这是给你的片段:

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

上面的选择器选择包含目标字符串的任何元素.foundin将是一个包含任何匹配元素的jQuery对象.请参阅以下网址上的API信息:http://docs.jquery.com/Selectors/contains#text

使用'*'通配符需要注意的一点是,你将获得所有元素,包括你的html一个你可能不想要的body元素.这就是为什么jQuery和其他地方的大多数例子都使用$('div:contains("我是一个简单的字符串")')

  • 应该指出这是区分大小写的.名为"me"的用户在jQuery文档页面上写了这个:$ .expr [':'].icontains = function(obj,index,meta,stack){return(obj.textContent || obj.innerText || jQuery( obj).text()||'').toLowerCase().indexOf(meta [3] .toLowerCase())> = 0; }; 示例:$("div:icontains('John')").css("text-decoration","underline"); (12认同)
  • @Tony,我怎样才能操作匹配的文本而不只是整个parapgraph,div等等? (11认同)
  • -1,不起作用.它返回树中的所有父节点,您只想要最低的节点. (9认同)
  • 如果文本节点有换行符,则无效."我是一个简单的\n字符串".请注意,不会呈现换行符,因此用户甚至不知道问题出在哪里.所有这些解决方案都有这个问题 见http://jsfiddle.net/qPeAx/ (5认同)

Bar*_*itz 51

通常,jQuery选择器不在DOM中的"文本节点"内搜索.但是,如果使用.contents()函数,将包含文本节点,则可以使用nodeType属性仅过滤文本节点,使用nodeValue属性搜索文本字符串.

    $('*', 'body')
        .andSelf()
        .contents()
        .filter(function(){
            return this.nodeType === 3;
        })
        .filter(function(){
            // Only match when contains 'simple string' anywhere in the text
            return this.nodeValue.indexOf('simple string') != -1;
        })
        .each(function(){
            // Do something with this.nodeValue
        });

  • 为了澄清,正如Tony所提到的,您可以使用":contains()"选择器在文本节点内进行搜索,但jQuery不会返回结果中的单个文本节点(只是元素列表).但是当你使用.contents()时,jQuery会返回元素和文本节点.有关更多信息:http://docs.jquery.com/Traversing/contents (8认同)
  • 我很困惑你为什么使用`.andSelf()`.来自http://api.jquery.com/andSelf/:"jQuery对象维护一个内部堆栈,用于跟踪匹配的元素集的更改.当调用其中一个DOM遍历方法时,将推送新的元素集如果需要前一组元素,.andSelf()可以提供帮助." 我没有看到以前的背景,我错过了什么? (5认同)

Sli*_*lim 29

这将只选择包含"我是一个简单的字符串"的叶元素.

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

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

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

如果你想抓住"我是一个简单的字符串".首先将文本包装在一个这样的元素中.

$('*: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>' 
               )  
           ) 
});
Run Code Online (Sandbox Code Playgroud)

然后这样做.

$('*[containsStringImLookingFor]').css("border","solid 2px red");
Run Code Online (Sandbox Code Playgroud)

  • .filter()函数在这里比.each()更有用.事实上,你实际上可以把它放在一个选择器中:"*:contains('blah'):empty" (3认同)
  • #nickf - :empty不会选择包含文本的文本节点.因此,如果文本节点包含"我是一个简单的字符串",则将其排除.http://docs.jquery.com/Selectors/empty (2认同)
  • 我知道我在这里有点晚了,但这不会忽略任何文本块,其中字符串存在于顶层,但其中有子节点?例如:<blockquote>我是一个简单的字符串<span style ="font-weight:bold;">生活在边缘</ span> </ blockquote> (2认同)

nic*_*ckf 17

如果您只想让节点最接近您要搜索的文本,则可以使用以下命令:

$('*:contains("my text"):last');
Run Code Online (Sandbox Code Playgroud)

如果您的HTML看起来像这样,这甚至可以工作:

<p> blah blah <strong>my <em>text</em></strong></p>
Run Code Online (Sandbox Code Playgroud)

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

  • @bzlm:好吧,它没有必要指明他想要找到多次出现. (4认同)
  • 这似乎不起作用。例如,在此页面上,*:contains("the"):last 仅返回 1 个元素。 (2认同)
  • 啊哈.有没有办法让它适用于多次出现?我认为它比涉及递归节点类型检查等的解决方案更优雅. (2认同)

Chr*_*ett 13

看一下highlight(jQuery插件).


Pix*_*omo 7

只是添加了Tony Miller的答案,因为这让我90%朝着我想要的方向但仍然无效.添加.length > 0;到他的代码的末尾让我的脚本工作.

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