如何操作使用的文本:在jQuery中包含

时间:2016-11-03 15:26:43

标签: javascript jquery

根据Tony对this question的回答,我构建了一个jQuery脚本,用于在html中找到预定义文本字符串的实例:

getBBox()

然后我突出显示使用Slim的答案找到的文本。但是,包含例如jQuery(document).ready(function($) { $.expr[":"].contains = $.expr.createPseudo(function(arg) { return function( elem ) { return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; }; }); $('*:contains("sometext")').each(function(){ if($(this).children().length < 1) $(this).html( $(this).text().replace( "sometext" ,'<span style="color:red;">sometext"</span>' ) ); }); }); 标记的文本块不会突出显示。

我猜它是因为长度&lt; 1 if子句阻止了这种情况发生。

有人可以建议改进Slim的代码吗?也许还可以解释为什么长度&lt; 1 if子句对于使代码工作是必要的?

提前感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

试试这个例子。简而言之 - 您需要检查不是完整的DOM树来查找字符串,而是使用单个级别并进一步移动。我刚刚按你的要求更改了“包含”工具。

jQuery.fn.reverse = [].reverse;

jQuery(document).ready(function($) {
    $.expr[":"].contains = $.expr.createPseudo(function(arg) {
      return function( elem ) {
        var cutElement = $(elem).clone().children().remove().end().text()
        return cutElement.toUpperCase().indexOf(arg.toUpperCase()) >= 0;
      };
    });
    $('*:contains("sometext")').reverse().each(function(){
        $(this).html( 
          $(this).html().replace(
            "sometext" 
            ,'<span style="color:red;">sometext</span>' 
          )  
        ); 
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>sometext and other text and inner <span>sometext</span></div>