Character Replacing in HTML (Cross-Browser Code) How?

alMubarmij · 12-29-2006, 08:16 PM

Hi ..

I have an adea to replace some charactor by another one in web pages by JavaScript.

Example(1) - One Charactor Replacing :
----------------------------------------------------------------
I need to replace:
any "#" charactor to "@"
any "a" to "A",
any "\n" to " ",
and any "~" to "&".

Example(2) - Word or Phrase Replacing :
----------------------------------------------------------------
Replacing a list or array of bad words to other words.

I don't know how I can do that for all document items like: <body>, <td>, <th>, <div>, <span>, <p> and so on.
but I need to check a full HTML page not only those tags.
Also I need a cross-browser code using DOM.

I think we can use something like this:

Code:

  
item.innerHTML

or:

document.layers.innerHTML // for Geko engine browsers.
document.all.innerHTML // for IE browser.

I can do this simply in PHP language functions like str_replace() but it's a server-side language, I want a cleint-side method by JavaScript.
Can any JavaScript professional help me ?

Philip M · 12-30-2006, 07:47 AM

Example 1.

The general form of the regex is
word = word.replace (/\a/g, "A"); // replace all instances of a by A
word = word.replace (/\~/g, "@");
// replace all instances of ~ by @

Example 2.

See:
http://www.js-examples.com/page/java...le.html?id=964

http://www.irt.org/script/229.htm

alMubarmij · 12-31-2006, 12:40 PM

Thanks I checked links, but nothing useful for me yet.
Can you explain more about your code and tel me how to use it for Example 1 ?

vegu · 12-31-2006, 01:38 PM

loop through all elements by calling a function recursively like

Code:

function scanNodes(node) {
  var i;
  for(i = 0; i < node.childNodes.length; i++)
    scanNodes(node.childNodes[i]);
}

Then while looking through all those nodes, check if theyre text nodes by checking their nodeName attribute, and if it is remove this text node and re-add with the replaced characters.

Code:

function scanNodes(node) {
 
  var i;

  if(node.nodeName == '#text') {
    
    /* get the old text held by the text node */

    var oldText = node.nodeValue;
    
    /* create a new text node with the characters replaced, in the case below  
     * the character a is replaced by A, look up regex with google if you need 
     * know more
     */
   
    var newNode = document.createTextNode(oldText.replace(/a/g, 'A'));
    
    /* insert the new node before the old node, to assure it will be in the correct spot */    

    node.parentNode.insertBefore(newNode, node);
    
    /* remove the old node */
     
    node.parentNode.removeChild(node);
    
    /* bail since text nodes dont have children */

    return;
  }

  /* recursively loop through all child nodes */  

  for(i = 0; i < node.childNodes.length; i++)
    scanNodes(node.childNodes[i]);
}

In order to make my example work youd call scanNodes on the body element

Code:

<body onload="scanNodes(document.body)">

alMubarmij · 01-01-2007, 06:13 PM

Sorry I am not advanced in JavaScript.

Can you put a full page form my example1:

Quote:

Example(1) - One Charactor Replacing :
--------------------------------------
I need to replace:
any "#" charactor to "@"
any "a" to "A",
any "\n" to " ",
and any "~" to "&".

Philip M · 01-01-2007, 07:28 PM

What is the point of this? What are you trying to achieve? You cannot make changes to other peoples' web pages.

alMubarmij · 01-01-2007, 08:02 PM

I know that, I want the code for my own web-site !

alMubarmij · 01-10-2007, 06:06 PM

Thank you all for your support.

but I have another problem now, and I hope to continue your help.

I want now to replace the each digite number (1, 2, 3 ...) by Unicode codes like:

Code:

&#1500 ;
&#1220 ;
&#1200 ;
&#1202 ;
&#1203 ;
..etc.

if I used the previous code it will replace the Unicode code numbers.

do you have any solution for that ?

alMubarmij · 01-11-2007, 10:39 AM

More Explaination:

I want something doing like this:

Code:

0 = &#1200 ;
1 = &#1500 ;
2 = &#1220 ;
3 = &#1201 ;
4 = &#1202 ;
5 = &#1203 ;
6 = &#1204 ;
7 = &#1205 ;
8 = &#1206 ;
9 = &#1207 ;

Note:
I put a space before ";" because the forum treat with the code as a HTML, and it will replace it.