How to replace text with link?

**jackman** · 07-12-2008 05:35 AM

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?

**vwphillips** · 07-12-2008 07:55 AM

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>

**jackman** · 07-14-2008 06:58 AM

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.

**vwphillips** · 07-14-2008 11:05 AM

I cant look at this now.
You will need to 'bump' this every couple of days unless someone else can do this for you.

**thetruth** · 01-31-2013 09:01 PM

I came this code and it works perfectly. But I'm looking for the same as jackman.

**vwphillips** · 02-01-2013 07:40 AM

have a look at

http://www.vicsjavascripts.org.uk/Wo...ordToolTip.htm

**thetruth** · 02-01-2013 02:52 PM

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?

**vwphillips** · 02-01-2013 05:51 PM

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>

**thetruth** · 02-02-2013 12:55 AM

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>

**vwphillips** · 02-02-2013 09:44 AM

That code is not suitable for phrases

**thetruth** · 02-02-2013 12:28 PM

Ok. Can you provide a code that turns phases found on a page into HREF? Many thanks!

**vwphillips** · 02-02-2013 01:23 PM

see post #8 of this thread

**thetruth** · 02-02-2013 01:41 PM

I have inserted the code into a new blank HTML page but none of the phases become links.

**vwphillips** · 02-03-2013 08:46 AM

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>

**thetruth** · 02-03-2013 01:19 PM

The code works except now it's converting HREFs already on the page (not listed in array) into links as well.

Thread: How to replace text with link?

Thread Tools

Display

How to replace text with link?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions