Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    9
    Thanked 0 Times in 0 Posts

    One works and One Doesn't. Why?

    This has been resolved. Thanks Old Pedant. You can see a demo HERE

    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).

    Code:
    <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
    Code:
    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
    Code:
    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;
    	
    }
    Last edited by FutureWebDev; 05-25-2012 at 11:06 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Wrong:
    Code:
    var query = "/(" + text + ")/gim";
    Right:
    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    FutureWebDev (05-25-2012)

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Wrong:
    Code:
    var query = "/(" + text + ")/gim";
    Right:
    Code:
    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
    Code:
    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!
    Code:
    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;
    	
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •