Javascript Replace()

**geo100x** · 11-24-2008, 04:10 PM

Hello,
I am have a javascript code I do replace some words of content pages.

The code is:

Code:

function replaceWords()
{
    var oldWords = new Array("Oradea","Sibiu","Bucuresti");
    var newWords = new Array("<b>Oradea</b>","<b>Sibiu</b>","<b>Bucuresti</b>");
      
    allTableData = document.getElementsByTagName('table');
    allTableHeaders = document.getElementsByTagName('div');
      
    var collections = new Array(allTableData,allTableHeaders);
    for (var k = 0; k < collections.length; ++k )
    {
        for (var i = 0; i < collections[k].length; ++i )
        {  
            if (collections[k][i].innerHTML.indexOf('BODY') == -1)
            {
                for ( var n = 0; n < oldWords.length; ++n )
                {
                    var indx = collections[k][i].innerHTML.indexOf(oldWords[n])
                    while (indx != -1)
                    {  
                        var replacement = '';
                        indx = collections[k][i].innerHTML.indexOf(oldWords[n]);
                        replacement = collections[k][i].innerHTML.replace(oldWords[n], newWords[n]);
                        collections[k][i].innerHTML = replacement;
                        break;                  
                    }
                }
            }
        }
    }
}
replaceWords();

My question is how can I do to not replace my words on the links, h1, h2, h3, images and tag <span>.

Thanks !

**Snookerman** · 11-24-2008, 04:44 PM

I don't know js but Brasov is a nice city.

**geo100x** · 11-24-2008, 04:55 PM

Yes, Brasov is a very beautiful city.
Expect continued a solution to my problem if someone knows.

**jscheuer1** · 11-24-2008, 06:13 PM

I'm not 100% sure this will work with your markup, but I tested it a number of ways and it seems to fit the bill. The below demo works fine:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<div>Bucuresti, I think Sibiu is a Hot Oradea<br>
Hello and welcome in Oradea to this great sporting event<br>
<span>Sibiu</span><br>Bucuresti
</div>
<script type="text/javascript">

function replaceWords(){
 var boldWords = new RegExp('(Oradea)|(Sibiu)|(Bucuresti)', 'g'),
 allTableData = document.getElementsByTagName('td'),
 allTableHeaders = document.getElementsByTagName('div'),
 collections = new Array(allTableData,allTableHeaders),
 carve = function(tnm, cn){
  var text = cn.nodeValue.replace(boldWords, '?!$').split('?!$');
  for(var b, n = [], i = 0; i < text.length; ++i){
   n.push(document.createTextNode(text[i]));
   if(tnm[i]){
    b = document.createElement('b');
    b.appendChild(document.createTextNode(tnm[i]));
    n.push(b);
   }
 }
 for (var i = n.length - 1; i > -1; --i)
  i == n.length - 1? cn.parentNode.replaceChild(n[i], cn) : n[i+1].parentNode.insertBefore(n[i], n[i+1]);
 };
 for (var k = collections.length - 1; k > -1; --k)
  for (var cn, tnm, i = collections[k].length - 1; i > -1; --i){
   cn = collections[k][i].childNodes;
   for (var j = cn.length - 1; j > -1; --j)
    if(cn[j].nodeType == 3 && (tnm = cn[j].nodeValue.match(boldWords)))
     carve(tnm, cn[j]);
 }
};
replaceWords();

</script>
</body>
</html>

**geo100x** · 11-24-2008, 07:14 PM

Thank you very much for the code works but has some error, for example if we wrote: "Hello and welcome in Oradea to this great sporting event" I make bold text on Oradea but no longer appears that the text is written after that mean "to this great sporting event."

You can test to see code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<div>Bucuresti, I think Sibiu is a Hot Oradea<br>
<span>Sibiu</span><br>Bucuresti<br/><br/>
Hello and welcome in Oradea to this great sporting event.</div>
<script type="text/javascript">

function replaceWords(){
 var boldWords = new RegExp('(Oradea)|(Sibiu)|(Bucuresti)', 'g'),
 allTableData = document.getElementsByTagName('td'),
 allTableHeaders = document.getElementsByTagName('div'),
 collections = new Array(allTableData,allTableHeaders),
 carve = function(tnm, cn){
  var text = cn.nodeValue.replace(boldWords, '?!$').split('?!$');
  for(var b, n = [], i = 0; i < tnm.length; ++i){
   n.push(document.createTextNode(text[i]));
   b = document.createElement('b');
   b.appendChild(document.createTextNode(tnm[i]));
   n.push(b);
 }
 for (var i = n.length - 1; i > -1; --i)
  i == n.length - 1? cn.parentNode.replaceChild(n[i], cn) : n[i+1].parentNode.insertBefore(n[i], n[i+1]);
 };
 for (var k = collections.length - 1; k > -1; --k)
  for (var cn, tnm, i = collections[k].length - 1; i > -1; --i){
   cn = collections[k][i].childNodes;
   for (var j = cn.length - 1; j > -1; --j)
    if(cn[j].nodeType == 3 && (tnm = cn[j].nodeValue.match(boldWords)))
     carve(tnm, cn[j]);
 }
};
replaceWords();

</script>
</body>
</html>

I apologize but I just gave an example with bold words but every word will be a tooltip with a description that will dynamically for each and every word I saw in your code is not possible to do so.

**MJH** · 11-24-2008, 07:48 PM

See, my code here:

http://www.dynamicdrive.com/forums/s...ad.php?t=38741

**jscheuer1** · 11-24-2008, 09:09 PM

Originally Posted by geo100x

Thank you very much for the code works but has some error, for example if we wrote: "Hello and welcome in Oradea to this great sporting event" I make bold text on Oradea but no longer appears that the text is written after that mean "to this great sporting event."

. . .

I apologize but I just gave an example with bold words but every word will be a tooltip with a description that will dynamically for each and every word I saw in your code is not possible to do so.

OK, well I fixed my code so that it now works (I thought I had already tested a case like that). But I had no idea you wanted a different script than you were asking for. Perhaps MJH's idea will work for you:

Originally Posted by MJH

See, my code here:

http://www.dynamicdrive.com/forums/s...ad.php?t=38741

You might like this though:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.toolTip {
cursor: help;
font-weight: bold;
}
</style>
</head>
<body>
<div>Bucuresti, I think Sibiu is a Hot Oradea.<br>
Hello and welcome in Oradea to this great sporting event.<br>
<span>Sibiu</span><br>Bucuresti
</div>
<script type="text/javascript">

;(function(){
 var addTips = {
  Oradea : 'Capital of Bihor County in Crisana, Romania',
  Sibiu : 'Capital of Sibiu County, Located some 282 km NW of Bucharest',
  Bucuresti : 'Capital City, Industrial, and Commercial Center of Romania'
 },
 tipWords = [], allTableData = document.getElementsByTagName('td'),
 allTableHeaders = document.getElementsByTagName('div'),
 collections = [allTableData, allTableHeaders],
 carve = function(tnm, cn){
  var text = cn.nodeValue.replace(tipWords, '?!$').split('?!$');
  for(var tip, n = [], i = 0; i < text.length; ++i){
   n.push(document.createTextNode(text[i]));
   if(tnm[i]){
    tip = document.createElement('span');
    tip.className = 'toolTip';
    tip.title = addTips[tnm[i]];
    tip.appendChild(document.createTextNode(tnm[i]));
    n.push(tip);
   }
 }
 for (var i = n.length - 1; i > -1; --i)
  i == n.length - 1? cn.parentNode.replaceChild(n[i], cn) : n[i+1].parentNode.insertBefore(n[i], n[i+1]);
 };
 for (var p in addTips)
  if (addTips.hasOwnProperty(p))
   tipWords.push(p);
 tipWords = new RegExp('(' + tipWords.join(')|(') + ')', 'g');
 for (var k = collections.length - 1; k > -1; --k)
  for (var cn, tnm, i = collections[k].length - 1; i > -1; --i){
   cn = collections[k][i].childNodes;
   for (var j = cn.length - 1; j > -1; --j)
    if(cn[j].nodeType == 3 && (tnm = cn[j].nodeValue.match(tipWords)))
     carve(tnm, cn[j]);
 }
})();

</script>
</body>
</html>

**geo100x** · 12-04-2008, 04:37 PM

First, thanks for the help granted by now.

MJH, you code can not use because I do not have the necessary knowledge to change for my needs.

I am changed code's the jscheuer1 for what am need but have some error.
I attached the code because it was too big.

The archive can be found:
1) ad.js - Code which replace the words and display tooltips
2) wz_tooltip.js - Tooltip code
3) ad.php - This file receives data that are sent by javascript, more specifically data that are sent to the line of code:

Code:

myurl var = 'http://localhost/InLineText/ad.php?affID =' + addTips [tnm [s] ];
     tip.setAttribute ( "onmouseover", "return escape (awContent ( '" + myurl +"'));");

4) index.html - The page is made to replace words.

The code does not work in IE, not look Tooltips.
I am like to replace only the exact words, example: If the words is the Bucuresti and Bucurestiul on the word to Bucurestiul do not replace.

I want to make a kind of ad InLineText.

How do I code to function even if the files ad.js, ad.php and wz_tooltip.js are on a different server than that index.html is the path to the files ad.js and wz_tooltip.js as in the example of the archive
For i am want to do so should work because it will be advertising on words.

If you do not understand something, please tell me.
Please someone help me with this code if you can, thanks!

**geo100x** · 01-19-2009, 07:25 PM

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.toolTip {
cursor: help;
font-weight: bold;
}
</style>
</head>
<body>
<div>Bucuresti, I think Sibiu is a Hot Oradea.<br>
Hello and welcome in Oradea to this great sporting event.<br>
<span>Sibiu</span><br>Bucuresti
</div>
<script type="text/javascript">

;(function(){
 var addTips = {
  Oradea : 'Capital of Bihor County in Crisana, Romania',
  Sibiu : 'Capital of Sibiu County, Located some 282 km NW of Bucharest',
  Bucuresti : 'Capital City, Industrial, and Commercial Center of Romania'
 },
 tipWords = [], allTableData = document.getElementsByTagName('td'),
 allTableHeaders = document.getElementsByTagName('div'),
 collections = [allTableData, allTableHeaders],
 carve = function(tnm, cn){
  var text = cn.nodeValue.replace(tipWords, '?!$').split('?!$');
  for(var tip, n = [], i = 0; i < text.length; ++i){
   n.push(document.createTextNode(text[i]));
   if(tnm[i]){
    tip = document.createElement('span');
    tip.className = 'toolTip';
    tip.title = addTips[tnm[i]];
    tip.appendChild(document.createTextNode(tnm[i]));
    n.push(tip);
   }
 }
 for (var i = n.length - 1; i > -1; --i)
  i == n.length - 1? cn.parentNode.replaceChild(n[i], cn) : n[i+1].parentNode.insertBefore(n[i], n[i+1]);
 };
 for (var p in addTips)
  if (addTips.hasOwnProperty(p))
   tipWords.push(p);
 tipWords = new RegExp('(' + tipWords.join(')|(') + ')', 'g');
 for (var k = collections.length - 1; k > -1; --k)
  for (var cn, tnm, i = collections[k].length - 1; i > -1; --i){
   cn = collections[k][i].childNodes;
   for (var j = cn.length - 1; j > -1; --j)
    if(cn[j].nodeType == 3 && (tnm = cn[j].nodeValue.match(tipWords)))
     carve(tnm, cn[j]);
 }
})();

</script>
</body>
</html>

I can help someone to change the script so that you do the following:

1) Words in text Bucuresti and Oradea repeated the script I do replace all the words, I would like to replace a word only once.

2)I'd like to be replace only if the word is exactly and not replace the word if for example found Bucurestilor i like to not replace with Bucuresti.

I would be deeply grateful if you can help me, thank you

Thread: Javascript Replace()

Thread Tools

Search Thread

Javascript Replace()

Bookmarks

Bookmarks

Posting Permissions