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

    Question about Hyperlink Coding

    Hello all,

    I'm relatively new to programming with Javascript and am working on some basic coding. I'm looking to see if there is a simpler line of code for a inserting a hyperlink at each occurrence of a specific word. I searched throughout the forums and couldn't find anything, but then again I probably don't know which particular code to use. Any advice would be much appreciated.

    Thanks!

  • #2
    pds
    pds is offline
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Roughly:

    Code:
    var needle = "textToReplace";
    var target = "http://www.google.com";
    var replacement = "replacementText";
    var paragraph = document.getElementById("targetElement").innerHTML;
    document.getElementById("targetElement").innerHTML = paragraph.replace(needle,"<a href='" + target + "'>" + replacement + "</a>");
    Hopefully that'll do it.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,111
    Thanks
    75
    Thanked 4,335 Times in 4,301 Posts
    Not quite right, pds.

    replace in JS takes a regular expression as the first argument. If you give it just a string, then it defaults to NOT-ignore case and NOT-global. The first might be okay, but the second means only the first occurrence will be replaced.

    So you'd need to use:
    Code:
    var needle = "textToReplace";
    var target = "http://www.google.com";
    var replacement = "replacementText";
    var paragraph = document.getElementById("targetElement");
    var re = new RegExp(needle,"g"); // and maybe "ig"
    paragraph.innerHTML = 
        paragraph.innerHTML.replace(re,"<a href='" + target + "'>" + replacement + "</a>");
    Last edited by Old Pedant; 03-19-2009 at 02:31 AM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,111
    Thanks
    75
    Thanked 4,335 Times in 4,301 Posts
    Also, if you want to leave the word in place and only surround it with the link, and if you want to ignore case for finding the word but leave the case alone in the replacement, you'll need to do something like this:
    Code:
    var word = "someWord"
    var replacement="<a href='http://www.google.com'>$1</a>"
    
    var re = new RegExp("(" + word + ")","g"); // and maybe "ig"
    
    var paragraph = document.getElementById("targetElement");
    paragraph.innerHTML = paragraph.innerHTML.replace(re, replacement );
    
    .
    Last edited by Old Pedant; 03-19-2009 at 02:31 AM.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,111
    Thanks
    75
    Thanked 4,335 Times in 4,301 Posts
    That code also has its problems. If your word is (for example) "to", then you will end up highlighting the "to" in other words such as "sTOp" and "Toot" and so on.

    So here is, I think the "ultimate" solution:
    Code:
    <script>
    function highlight(word, indiv)
    {
        var replacement="$1<a href='http://www.google.com'><b>$2</b></a>$3"
    
        var re = new RegExp("(^|\\W)(" + word + ")(\\W|$)","ig"); 
    
        var paragraph = document.getElementById(indiv);
        paragraph.innerHTML = paragraph.innerHTML.replace(re, replacement );
    }
    </script>
    
    <body>
    <div id="foo">Now is the time for all good men to come to!</div>
    <p>
    <div id="bar">To toot your horn you stop and STOP and Stop!</div>
    
    <script>
    highlight("to","foo");
    highlight("to","bar");
    highlight("stop","bar"); // try it without this line, first
    </script>

  • Users who have thanked Old Pedant for this post:

    TinyScript (03-19-2009)

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    awesome. Cool script OP. Thanks

  • #7
    pds
    pds is offline
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfortunately I'm having trouble thanking people, otherwise I would. Good catch, I'll have to read up on Regular Expressions.


  •  

    Posting Permissions

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