Javascript RegExp search

Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>

str = "This is an apple and I love it.";

function searching(query){
    var patt = new RegExp(query,"gi");
    var query = "<span style='color: red'>"+query+"</span>";
    document.getElementById("text").innerHTML = str.replace(patt,query);
    return str = document.getElementById("text").innerHTML;
    }

/*
patt1 = new RegExp("is","gi");
patt2 = /\san\s/gi;
document.write(str.replace(patt2,"<span style='color:red'> are </span>"));
*/
</script>
</head>
<body>
<div id="text"><script>document.write(str)</script></div>
<form>
<input type="text" id="querys" value="" onkeyup="searching(this.value)" />
</form>
</body>
</html>

I want after each search the result replaces the original string with the hightlight (red). For example, For the first time, I search "apple". "apple" is highlighted in the string. Return the string in the div with the red highlight. For the second time, I search "is" "is" is highlighted with red in the string.

I tried to use innerHTML but innerHTML will also return the inline CSS style tags.

ruakh · Accepted Answer · 2011-11-06 03:10:08Z

1

I don't understand the purpose of this line:

return str = document.getElementById("text").innerHTML;

Is str being used somewhere else? In that case, you might need to keep two separate variables: one for the original string (which you'll do your searches against) and one for the modified string with the <span> tags.

answered Nov 6, 2011 at 3:10

ruakh

185k29 gold badges292 silver badges324 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Tin Amaranth Over a year ago

No. I'd just wanted to set str to be the new str after the str has been replaced with the highlighted text. And a new search is based on the hightlighted text. My original intention was to search on the last hightlighted search result.

ruakh Over a year ago

@TinAmaranth: Sorry, I don't understand at all what you're trying to do. :-/

Tin Amaranth Over a year ago

First, the user searches for "string1"; Second, the string "string1" is highlighted with the colour "yellow" in the text; Third, the user searches for "string2"; Forth, "string2" is highlighted. The point is that the last highlighted text ("string1") stays. Now my case is that the highlighted string1 is gone after the user searches string2.

ruakh Over a year ago

I don't think you can do that coherently in quite the way you've laid out. You're doing all this on key-up, with no way for the user to indicate that a given search-string is complete; so by "first, the user searches for 'string1'", you actually mean "first, the user searches for 's', then 'st', then 'str' . . .". That's not a problem in and of itself, but if you leave all old search-strings still highlighted, then every occurrence of "s" will remain highlighted even once the user has typed all of "string1".

Tin Amaranth Over a year ago

So... keeping the old search highlight is by no means possible?

|

Collectives™ on Stack Overflow

Javascript RegExp search

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related