On this page I want to search for a word in the text and highlight all occurrences. If, for example, I look for "front end" than I want all occurrences of "Front end" to be highlighted. With the code below I do highlight them but the occurrences's upper case character is also replaced. Can you fix this? here's my code:

this makes jQuery contains case insensitive

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

and this is the code that highlights by replacing

$('input[value="Zoeken"]').click(function(){
    $('.section').html(function (i, str) {
        yellowspan = new RegExp('<span style="background-color: #FFFF00">' ,"g"); 
        empty = "";
        return str.replace(yellowspan, empty);
    });

    $('.section').html(function (i, str) {
        endspan = new RegExp("</span>" ,"g"); 
        empty = "";
        return str.replace(endspan, empty);
    });

    var string = $('input[placeholder="Zoeken"]').val();                    
    $('.section:contains("' + string + '")').each(function(index, value){
        $(this).html(function (i, str) {
            simpletext = new RegExp(string,"gi"); 
            yellowtext = "<span style='background-color: #FFFF00'>" + string + "</span>";
            return str.replace(simpletext, yellowtext);
        });
    });
});

the problematic code is on the last html() function

On this page I want to search for a word in the text and highlight all occurrences. If, for example, I look for "front end" than I want all occurrences of "Front end" to be highlighted. With the code below I do highlight them but the occurrences's upper case character is also replaced. Can you fix this? here's my code:

this makes jQuery contains case insensitive

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

and this is the code that highlights by replacing

$('input[value="Zoeken"]').click(function(){
    $('.section').html(function (i, str) {
        yellowspan = new RegExp('<span style="background-color: #FFFF00">' ,"g"); 
        empty = "";
        return str.replace(yellowspan, empty);
    });

    $('.section').html(function (i, str) {
        endspan = new RegExp("</span>" ,"g"); 
        empty = "";
        return str.replace(endspan, empty);
    });

    var string = $('input[placeholder="Zoeken"]').val();                    
    $('.section:contains("' + string + '")').each(function(index, value){
        $(this).html(function (i, str) {
            simpletext = new RegExp(string,"gi"); 
            yellowtext = "<span style='background-color: #FFFF00'>" + string + "</span>";
            return str.replace(simpletext, yellowtext);
        });
    });
});

the problematic code is on the last html() function

• javascript
• jquery
• string
• replace

• What's the problem of your code ? Have you tried to understand what doen't work ? – Ricardo Lohmann Commented Sep 27, 2013 at 17:34
• I alter the jQuery contains so as to find all occurences of a string whether upper or lower case. Then I look for any span tags used for highlighting already in place and removes them. Lastly I highlight all new occurences by replacing their text with the string searched. BUT as I say above, this replaces uppercase characters that these occurences may have with lower case. – Konstantinos Papakonstantinou Commented Sep 27, 2013 at 17:36

1 Answer 1

replace

simpletext = new RegExp(string,"gi"); 
yellowtext = "<span style='background-color: #FFFF00'>" + string + "</span>";
return str.replace(simpletext, yellowtext);

with

simpletext = new RegExp("(" + string + ")","gi"); 
return str.replace(simpletext, "<span style='background-color: #FFFF00'>$1</span>")

the extra parens in new Regexp() capture the value found. the $1 in str.replace inserts the captured value