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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Inline text highlighting

    Alright, I'm using a Rooh.It WordPress plugin right now, but I don't like the way they do it, so I want to write my own code to do something similar.

    I want the user to be able to select the text they want to highlight, and the background color of that text changes to whatever color they have selected.

    How can I do this in JavaScript?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    This ought to move you forward. You can use css to change the background color the .highLight selector from background-color:#ff9900; (but what is meant by "whatever color they have selected"?).


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    var count = 0;
    var itemList = new Array();
    var oldText = "";
    var rawText = "";
    var workText = "";
    
    function highlight() {
    // overcome problem in Firefox caused by blank fields
    itemList[0] = document.getElementById("txt1").value == '' ? "FireSchmoxStryng" : document.getElementById("txt1").value;
    itemList[1] = document.getElementById("txt2").value == '' ? "FireSchmoxStryng" : document.getElementById("txt2").value;
    itemList[2] = document.getElementById("txt3").value == '' ? "FireSchmoxStryng" : document.getElementById("txt3").value;
    
    if (count == 0) {
    rawText = document.getElementById('subjectMatter');
    workText = rawText.innerHTML; 
    oldText = rawText.innerHTML; 
    }
    else {
    workText = oldText;
    }
    
    workText = workText.replace(/(\<)/g," $1").replace(/(\>)/g,"$1 ");
    
    for (i=0; i<itemList.length; i++) {
    itemList[i]= itemList[i].replace(/^\s+|\s+$/g,"");
    var currWord = new RegExp("([\\s\\r\\n\(]*"+itemList[i]+"[\\s,;\.:?!\'\"()-]+)",'gi');
    workText = workText.replace(currWord," <span class='highLight'>$1<\/span> ");
    }
    
    //for (i=0; i<itemList.length; i++) {	
    //var currWord = new RegExp("(\<\/span\>\\s)([0-9a-z%,;:\.?!\"\'()]+\\s)",'gi');
    //workText = workText.replace(currWord," $1<span class='highLight'>$2<\/span> ");			 
    //}
    
    //for (i=0; i<itemList.length; i++) {	
    //var currWord = new RegExp("(\\s[0-9a-z%,;.:?!'()]+)(\\s\<span class='highLight'>)",'gi');
    //workText = workText.replace(currWord," <span class='highLight'>$1<\/span>$2 ");			 
    //}
    
    rawText.innerHTML = workText;
    count ++;
    }
    
    </script>
    
    <style type="text/css">
    body {font-family: arial; font-size: 10pt; margin-top: 60px; margin-bottom: 60px; background-color: #f5f5f5;}
    .highLight {font-family: arial; font-size: 10pt; color: #00008B; background-color:#ff9900; font-weight: bold; cursor: help;}	
    </style>
    
    </head>
    
    <body>
    
    <form>
    First word or phrase to find <input type = "text" id = "txt1" size = "50"><br>
    Second word or phrase to find <input type = "text" id = "txt2" size = "50"><br>
    Third word or phrase to find <input type = "text" id = "txt3" size = "50"><br><br>
    
    <input type = "button" value = "Highlight Selected" onclick = "highlight()">
    <input type = "reset" value = "Reset Form">
    <input type = "button" value = "Reset Results" onclick = "document.getElementById('subjectMatter').innerHTML = oldText">
    </form>
    
    <br>
    <div id='subjectMatter'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. Morbi et metus ut diam molestie ullamcorper. Suspendisse rutrum semper semper. Donec volutpat neque in lorem tempus scelerisque. Curabitur dignissim rhoncus quam ac suscipit. Donec viverra quam lobortis neque porta a sagittis urna tristique. Suspendisse nec lacus nisi. Pellentesque fermentum massa sit amet magna hendrerit vestibulum. Sed elit libero, scelerisque eu eleifend ut, interdum gravida nunc. Etiam ut nisi sapien, et tempus sem. Nam vel mi est. Mauris congue felis ut ante bibendum vehicula. Nullam nec sapien arcu, eget cursus lorem. Donec blandit, dolor tristique ornare dictum, arcu sapien vulputate dolor, et placerat risus odio ut magna. Ut magna mauris, pellentesque at ultricies vitae, fermentum vitae dolor. 
    
    </div>
    </body>
    </html>
    Q. If you were to spell out numbers, how far would you have to go until you would find the letter "A"?
    A. One thousand
    Last edited by Philip M; 09-10-2010 at 12:12 PM.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Q. If you were to spell out numbers, how far would you have to go until you would find the letter "A"?
    два (2 in Russian)

    Actually, if you use the number one with a female noun, you only have to get to 1:
    одна девушка (one girl)

    Crazily, the number one is an adjective in Russian, and so matches the gender of the noun it modifies.

    <grin style="чудовищно" />
    Last edited by Old Pedant; 09-10-2010 at 08:02 PM.
    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.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Well, yes, I meant in English!

    Quatre French
    Acht Dutch

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    It is a fun question. A surprising answer in English if you've never thought about it before. Of course, some people say "one hundred AND one", but we'll delegate them to English grammar hell.
    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.


  •  

    Tags for this Thread

    Posting Permissions

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