javascript - Highlight all occurrences of string - case insensitive - Stack Overflow

admin管理员组

文章数量:1336633

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

Share Improve this question Follow edited Jul 10, 2019 at 7:20 Cœur 38.8k2626 gold badges205205 silver badges277277 bronze badges asked Sep 27, 2013 at 17:31 Konstantinos PapakonstantinouKonstantinos Papakonstantinou 1,00744 gold badges1919 silver badges3535 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

本文标签： javascriptHighlight all occurrences of stringcase insensitiveStack Overflow