www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 20

Thread: How to replace text with link?

  1. #1
    Join Date
    Jul 2008
    Posts
    2

    How to replace text with link?

    I want to replace any keyword which displays on html page with keyword with link. I want to do this by javascript. This keyword can be already linked, if this keyword is already linked then I don't want to link this keyword with new link tag but if it is not linked then link with some url.

    This keyword will also not linked when it is an alt text of an image or used in script or somewhere else which is not displayed on page.

    I have to do this using javascript. Can somebody suggest me how to do this?

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    var Ary=[];
    Ary[0]=['KeyWord','http://www.webdeveloper.com/'];
    function zxcWords(zxcn,ary){
     var zxcnu=zxcn.childNodes.length;
     for(var zxc0=0;zxc0<zxcnu;zxc0++) {
      var zxctxt=zxcn.firstChild.data;
      var zxcrn=zxcn.removeChild(zxcn.firstChild);
      if(zxcrn.nodeType==3&&zxcn.nodeName.toUpperCase()!='A'){
       var zxcs=zxctxt.split(' ');
       for(var zxc1=0;zxc1<zxcs.length; zxc1++) {
        var zxcnn=document.createTextNode(zxcs[zxc1]+' ');
        for (var zxc0a=0;zxc0a<ary.length;zxc0a++){
         if (zxcs[zxc1]==ary[zxc0a][0]){
          zxcnn=document.createElement('A');
          zxcnn.href=ary[zxc0a][1];
          zxcnn.appendChild(document.createTextNode(zxcs[zxc1]+' '));
         }
        }
        zxcn.appendChild(zxcnn);
       }
      }
      else {
       zxcWords(zxcrn,ary);
       zxcn.appendChild(zxcrn);
      }
     }
    }
    
    
    /*]]>*/
    </script></head>
    
    <body onload="zxcWords(document.body,Ary);">
    Some Text KeyWord some <a href="http://www.codingforums.com/">text</a> <a href="http://www.codingforums.com/">KeyWord</a>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jul 2008
    Posts
    2
    Thanks vwphilips for your reply. Your code is really good but I have some problem with this.

    You are splitting the text with spaces but keyword can have more than one word, so how can I match these keywords and linked those keywords.

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    I cant look at this now.
    You will need to 'bump' this every couple of days unless someone else can do this for you.
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Jan 2013
    Posts
    9
    I came this code and it works perfectly. But I'm looking for the same as jackman.

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Jan 2013
    Posts
    9
    Thanks for the quick reply! I think I'm doing something wrong. Would you be able to modify the above code to reflect the change of a keyword having more than one word?

  8. #8
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    If you look at Example1 at the text 'DIV in the HTML code' that is a multi word phrase detected by the script coloured green and has a tool tip.

    Example 2 has detected multi word phrases
    'class name'
    'this has been converted'
    and 'tooltip'

    is there something else you are looking for?

    do you want me to modify the code so that it adds link HREFs?

    Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    .example {
      position:absolute;left:20px;top:20px;width:400px;height:420px;background-Color:white;border:solid red 1px;padding:5px;
    }
    
    .wordcls {
     color:#CC00FF;
    }
    
    .wordcls2 {
     color:green;font-Weight:bold;
    }
    
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Word Links (1-Febuary-2013)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    
    /*
     Functional Code Size 0.793K
    */
    
    
    //****** Functional Code - NO NEED to Change.
    
    function zxcWordLinks(o){
     var obj=document.getElementById(o.ID)||document.body,html=obj.innerHTML.replace(/</g,'zxc'),ary,wary=o.WordArray,word,txt,cs=typeof(o.CaseSensitive)!='boolean'||!o.CaseSensitive?false:true,z0=0,z1=0,z1a;
     for (;z0<wary.length;z0++){
      reg=new RegExp('('+wary[z0][0]+')','gi');
      html=html.replace(reg,'<a>$1</a>');
     }
     html=html.replace(/zxc/g,'<');
     obj.innerHTML=html;
     ary=obj.getElementsByTagName('A');
     for (;z1<wary.length;z1++){
      for (z1a=0;z1a<ary.length;z1a++){
       word=wary[z1][0];
       txt=ary[z1a].innerHTML;
       if (!cs){
        word=word.toLowerCase();
        txt=txt.toLowerCase();
       }
       wary[z1][1]?ary[z1a].href=wary[z1][1]:null;
       trim(word)==trim(txt)ary[z1a].className=typeof(wary[z1][2])=='string'?wary[z1][2]:'':null;
      }
     }
    }
    
    function trim(string){
     return string.replace(/^\s+|\s+$/g,'');
    }
    
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
     zxcWordLinks({
      WordArray:[
       // field 0 = the phrase
       // field 1 = the link HREF
       // field 2 = the link class name
       ['defaults','http://www.vicsjavascripts.org.uk/','wordcls'],
       ['tooltip','http://www.vicsjavascripts.org.uk/','wordcls2'],
       ['Vics Javascripts','http://www.vicsjavascripts.org.uk/','wordcls'],
       ['Word Tool Tip','http://www.vicsjavascripts.org.uk/','wordcls2'],
       ['offsets','http://www.vicsjavascripts.org.uk/','wordcls'],
       ['DIV in the HTML code','http://www.vicsjavascripts.org.uk/','wordcls2']
      ],
      ID:'Example1',
      CaseSensitive:true
     });
    
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
     <div id="Example1" class="example" >
       Example 1 (ToopTip activated by 'mouseover')<br />
       <br />
      <p>
       Word Tool Tip<br />
       by Vic Phillips <a href="http://www.vicsjavascripts.org.uk/" >Vics Javascripts</a><br />
      <br />
      </p>
      <div>
       To display a tooltip popup on mouseover<br /> of a word or phrase.
      </div>
      <hr />
      <p>
       Each word or phrase is defined in an array
       together with optional tooltip inner html, class names and offsets.
      </p>
      <span>Script defaults may be</span> used to define the tooltip offsets from the word or phase,
      the class name of the word or phrase, the class name of the tooltip,<br />
      if the words and phrases are case sensitive,<br />
      and the event type to display the tooltip.
      <hr />
      <div>
       Alternatively the tooltip may be a DIV in the HTML code.
      </div>
      <hr />
      <br />
      <br />
      The HTML may include nested elements and include inline elements<br />
      such as images <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Image" width="50" height="50" />
      and inputs <input name="" size="10" />.
     </div>
    
    
    </body>
    
    </html>
    Last edited by vwphillips; 02-02-2013 at 12:39 AM.
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #9
    Join Date
    Jan 2013
    Posts
    9
    If possible, can you modify the code below?

    Code:
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    var Ary=[];
    Ary[0]=['KeyWord','http://www.webdeveloper.com/'];
    function zxcWords(zxcn,ary){
     var zxcnu=zxcn.childNodes.length;
     for(var zxc0=0;zxc0<zxcnu;zxc0++) {
      var zxctxt=zxcn.firstChild.data;
      var zxcrn=zxcn.removeChild(zxcn.firstChild);
      if(zxcrn.nodeType==3&&zxcn.nodeName.toUpperCase()!='A'){
       var zxcs=zxctxt.split(' ');
       for(var zxc1=0;zxc1<zxcs.length; zxc1++) {
        var zxcnn=document.createTextNode(zxcs[zxc1]+' ');
        for (var zxc0a=0;zxc0a<ary.length;zxc0a++){
         if (zxcs[zxc1]==ary[zxc0a][0]){
          zxcnn=document.createElement('A');
          zxcnn.href=ary[zxc0a][1];
          zxcnn.appendChild(document.createTextNode(zxcs[zxc1]+' '));
         }
        }
        zxcn.appendChild(zxcnn);
       }
      }
      else {
       zxcWords(zxcrn,ary);
       zxcn.appendChild(zxcrn);
      }
     }
    }
    
    
    /*]]>*/
    </script>

  10. #10
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    That code is not suitable for phrases
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  11. #11
    Join Date
    Jan 2013
    Posts
    9
    Ok. Can you provide a code that turns phases found on a page into HREF? Many thanks!

  12. #12
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    see post #8 of this thread
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  13. #13
    Join Date
    Jan 2013
    Posts
    9
    I have inserted the code into a new blank HTML page but none of the phases become links.

  14. #14
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    woops

    there was a mistake in the script I posted

    Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    .example {
      position:absolute;left:20px;top:20px;width:400px;height:420px;background-Color:white;border:solid red 1px;padding:5px;
    }
    
    .wordcls {
     color:#CC00FF;
    }
    
    .wordcls2 {
     color:green;font-Weight:bold;
    }
    
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Word Links (1-Febuary-2013)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    
    /*
     Functional Code Size 0.793K
    */
    
    
    //****** Functional Code - NO NEED to Change.
    
    function zxcWordLinks(o){
     var obj=document.getElementById(o.ID)||document.body,html=obj.innerHTML.replace(/</g,'zxc'),ary,wary=o.WordArray,word,txt,cs=typeof(o.CaseSensitive)!='boolean'||!o.CaseSensitive?false:true,z0=0,z1=0,z1a;
     for (;z0<wary.length;z0++){
      reg=new RegExp('('+wary[z0][0]+')','gi');
      html=html.replace(reg,'<a>$1</a>');
     }
     html=html.replace(/zxc/g,'<');
     obj.innerHTML=html;
     ary=obj.getElementsByTagName('A');
     for (;z1<wary.length;z1++){
      for (z1a=0;z1a<ary.length;z1a++){
       word=wary[z1][0];
       txt=ary[z1a].innerHTML;
       if (!cs){
        word=word.toLowerCase();
        txt=txt.toLowerCase();
       }
       wary[z1][1]?ary[z1a].href=wary[z1][1]:null;
       trim(word)==trim(txt)&&typeof(wary[z1][2])=='string'?ary[z1a].className=wary[z1][2]:null;
      }
     }
    }
    
    function trim(string){
     return string.replace(/^\s+|\s+$/g,'');
    }
    
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
     zxcWordLinks({
      WordArray:[
       // field 0 = the phrase
       // field 1 = the link HREF
       // field 2 = the link class name
       ['defaults','http://www.vicsjavascripts.org.uk/','wordcls'],
       ['tooltip','http://www.vicsjavascripts.org.uk/','wordcls2'],
       ['Vics Javascripts','http://www.vicsjavascripts.org.uk/','wordcls'],
       ['Word Tool Tip','http://www.vicsjavascripts.org.uk/','wordcls2'],
       ['offsets','http://www.vicsjavascripts.org.uk/','wordcls'],
       ['DIV in the HTML code','http://www.vicsjavascripts.org.uk/','wordcls2']
      ],
      ID:'Example1',
      CaseSensitive:true
     });
    
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body id="Example1">
     <div class="example" >
       Example 1 (ToopTip activated by 'mouseover')<br />
       <br />
      <p>
       Word Tool Tip<br />
       by Vic Phillips <a href="http://www.vicsjavascripts.org.uk/" >Vics Javascripts</a><br />
      <br />
      </p>
      <div>
       To display a tooltip popup on mouseover<br /> of a word or phrase.
      </div>
      <hr />
      <p>
       Each word or phrase is defined in an array
       together with optional tooltip inner html, class names and offsets.
      </p>
      <span>Script defaults may be</span> used to define the tooltip offsets from the word or phase,
      the class name of the word or phrase, the class name of the tooltip,<br />
      if the words and phrases are case sensitive,<br />
      and the event type to display the tooltip.
      <hr />
      <div>
       Alternatively the tooltip may be a DIV in the HTML code.
      </div>
      <hr />
      <br />
      <br />
      The HTML may include nested elements and include inline elements<br />
      such as images <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Image" width="50" height="50" />
      and inputs <input name="" size="10" />.
     </div>
    
    
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  15. #15
    Join Date
    Jan 2013
    Posts
    9
    The code works except now it's converting HREFs already on the page (not listed in array) into links as well.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles