...

View Full Version : Resolved One works and One Doesn't. Why?



FutureWebDev
05-25-2012, 09:49 PM
This has been resolved. Thanks Old Pedant. You can see a demo HERE (http://jsfiddle.net/FutureWebDev/HfS7e/)

So what I'm trying to do is take the value of a text box, use a regular expression to search the text inside of <div id"searchtext"></div> and wrap all the matches in <span></span>, which would effectively highlight the matching text.

Where I'm running into trouble is when I try to plug the value of the text box into a regular expression literal it doesn't work. But if I just plug any random string ( such as the word "is" ) into the regular expression literal, it does work. But this would obviously defeat the purpose of the function because you would have to change the regular expression each time you wanted to highlight a different word.

The HTML is below followed by two versions of the same function. The first one doesn't work. The second one does (but is useless).


<style>
#searchtext span{
background-color:#FF9;
color:#555;
}
</style>
<body>

<form action="" method="" id="search" name="search">
<input name="query" id="query" type="text" size="30" maxlength="30">
<input type="button" value="Search" onClick="highlightSearch()">
</form>
<div id="searchtext">
JavaScript is the programming language of the Web. The overwhelming majority of
modern websites use JavaScript, and all modern web browsers—on desktops, game
consoles, tablets, and smart phones—include JavaScript interpreters, making Java-
Script the most ubiquitous programming language in history. JavaScript is part of the
triad of technologies that all Web developers must learn: HTML to specify the content
of web pages, CSS to specify the presentation of web pages, and JavaScript to specify
the behavior of web pages. This book will help you master the language.
If you are already familiar with other programming languages, it may help you to know
that JavaScript is a high-level, dynamic, untyped interpreted programming language
that is well-suited to object-oriented and functional programming styles. JavaScript
derives its syntax from Java, its first-class functions from Scheme, and its prototypebased
inheritance from Self. But you do not need to know any of those languages, or
be familiar with those terms, to use this book and learn JavaScript.
The name "JavaScript" is actually somewhat misleading. <span>Except</span> for a superficial syntactic
resemblance, JavaScript is completely different from the Java programming language.
And JavaScript has long since outgrown its scripting-language roots to become
a robust and efficient general-purpose language. The latest version of the language (see
the sidebar) defines new features for serious large-scale software development.
</div></body>

Putting the value of a text box into var text and setting var query to a regular expression that uses the value of var text.
Doesn't Work

function highlightSearch() {
var text = document.getElementById("query").value;
var query = "/(" + text + ")/gim";
var e = document.getElementById("searchtext").innerHTML;
var newe = e.replace(query, "<span>$1</span>");
document.getElementById("searchtext").innerHTML = newe;

}
Here I did a little test to see if explicitly setting the value to the word "is" would work. It did.
Does Work

function highlightSearch() {
/*var text = document.getElementById("query").value;*/
var query = /(is)/gim;
var e = document.getElementById("searchtext").innerHTML;
var newe = e.replace(query, "<span>$1</span>");
document.getElementById("searchtext").innerHTML = newe;

}

Old Pedant
05-25-2012, 10:42 PM
Wrong:


var query = "/(" + text + ")/gim";

Right:


var query = new RegExp( "(" + text + ")", "gim" );

You can't use a string, alone, as a regular expression. You must convert it into a RegExp object, as shown.

FutureWebDev
05-25-2012, 10:51 PM
Wrong:


var query = "/(" + text + ")/gim";

Right:


var query = new RegExp( "(" + text + ")", "gim" );

You can't use a string, alone, as a regular expression. You must convert it into a RegExp object, as shown.

ohhhhhh man you beat me to it. I actually figured this out except I set the first argument of RegExp to a variable.

Works

function highlightSearch() {
var text = document.getElementById("query").value;
var text = "(" + text + ")";
var query = new RegExp(text, "gim");
var e = document.getElementById("searchtext").innerHTML;
var newe = e.replace(query, "<span>$1</span>");
document.getElementById("searchtext").innerHTML = newe;

}

But with yours I can use one less line of code. Which makes your superior to mine.

Works with less!

function highlightSearch() {
var text = document.getElementById("query").value;
var query = new RegExp( "(" + text + ")", "gim" );
var e = document.getElementById("searchtext").innerHTML;
var newe = e.replace(query, "<span>$1</span>");
document.getElementById("searchtext").innerHTML = newe;

}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum