Search text in page (jQuery) - What to do if no match

Question

I have this great function that works like a charm. The script highlights the words in the content as long as it matches. However, I can seem to find the right code to display an error if no result matches the query.

This is the HTML:

<div id="search">
    <input type="text" id="searchtxt" />
    <input type="button" value="Find" onClick="replaceText();" id="search-resultButton" />
</div>

<p>Copy goes here</p>

And this is the function:

function replaceText() {
    $("body").find(".search-result").removeClass("search-result");

    var searchword = $("#searchtxt").val();
    var filter = new RegExp("\\b"+searchword+"\\b", "ig");

    if(searchword!=""){        
        $("body").each(function( ) { 
            $(this).html($(this).html().replace(filter,"<span class='search-result'>" + searchword + "</span>")) ;
        });
    }
}

I guess I'm looking for something like:

if(searchword!=""){        
    $("body").each(function( ) { 
        $(this).html($(this).html().replace(filter,"<span class='search-result'>" + searchword + "</span>")) ;
    });
} else {
    alert(“There is no match”)
}

But I can't seem to find the way to write it. Any help would be appreciated.

Thank you!

score 0 · Answer 1 · answered Jul 18 '14 at 22:32

You have messed up quotes alert(“There is no match”). Chances are you just need to fix it so it uses normal quotes before there is any chance it will work:

alert("There is no match")

"“ <-- see how those look different

Oh, and I'm sure this isn't the best way. but you could check if the replaced contents are equal to the original contents, and if so there is no match.

var replaced = $(this).html().replace(filter,"<span class='search-result'>" + searchword + "</span>");
if ($(this).html() == replaced) {
     //error
 }
 else
    $(this).html(replaced) ;

Thank you Dave. Yes, the quotes didn't export well when I copied and pasted my code into Stackoverflow. They are correct im my code.Thank you also for the suggestion. I wasn't able to implement it successfully so I went with :contains instead of RegEx. It was much simpler. — Julesfrog, Jul 21 '14 at 18:14

score 0 · Answer 2 · answered Jul 21 '14 at 18:24

Couldn't get RegExp to work so I went with :contains. It works great. I hope this can help someone:

function replaceText() {
    $("body").find(".search-result").removeClass("search-result");

    var searchWord = $("#searchtxt").val();             

    $("body").each(function( ) { 
        $('.module').removeClass('highlight'); //Remove old search highlights
        $("h1 .last-name:contains('" + searchWord + "')").addClass("search-result");

        if ($(".search-result")[0]){                
            // Do something
        } else {
            // No Match
        }
    });
}

To solve the case sensitivity issue, I added:

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

I hope this helps.

Search text in page (jQuery) - What to do if no match

2 Answers2

Linked