How to manipulate text found using :contains in jQuery

Question

Based on Tony's answer to this question, I've built a jQuery script which locates instances of a predefined text string in our html:

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>' 
                   )  
               ); 
    });
});

I then highlight the text found using Slim's answer. However, text blocks containing for example a <strong> tag don't get highlighted.

I'm guessing it's because the length<1 if clause is preventing this from happening.

Can anyone suggest an improvement on Slim's code? Also perhaps explain why exactly the length<1 if clause is necessary to make the code work?

Thanks in advance for any help!

Answer 1

Try this example. In short - you need to check not full DOM tree to find string, but use single level and move deeper. I just have changed 'contains' implementtaion as you asked.

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>