Web Hosting Talk






PDA

View Full Version : Charactor Replacing in HTML (Cross-Browser Code) How?

alMubarmij
12-31-2006, 11:55 AM
Hi ..

I have an idea 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 "\n" to " " ,
and any "001" 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:

item.innerHTML = ......


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 ?
the_pm
12-31-2006, 02:39 PM
I have a good start for you. Try this:

1. Run the following script as is.

2. Then try running it with that one line in the script uncommented.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
var foo = new Array();
var bar;

function setup() {
var foo = document.getElementsByTagName("*");
for (i=0; i<foo.length; i++) {
bar = foo[i].innerHTML;
alert(bar);
bar = bar.replace(/ipsum/g,"MUSPI");
alert(bar);
// foo[i].innerHTML = bar;
}
}
</script>
</head>

<body onload="setup();">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mollis tortor. Nulla consectetuer. Nunc metus. Aliquam porta ultricies ipsum. Maecenas eu mi. Duis dictum, enim in ullamcorper auctor, ipsum elit dignissim lectus, in consequat ligula diam eu erat. Donec sit amet justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et tortor eu magna consequat laoreet. Praesent leo justo, fermentum et, blandit ac, viverra non, ante. Fusce gravida aliquet tellus. Etiam iaculis, mi vel ultricies tempor, augue sem porta enim, a aliquam purus dui nec elit. Etiam in mauris nec ligula tincidunt placerat. Nulla in libero sed arcu aliquet porttitor. Aliquam erat volutpat. Phasellus et arcu. Donec dapibus eros eu ligula. Curabitur egestas justo at ligula. Fusce quis eros vitae sapien fringilla bibendum. Ut faucibus ultrices lorem. </p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mollis tortor. Nulla consectetuer. Nunc metus. Aliquam porta ultricies ipsum. Maecenas eu mi. Duis dictum, enim in ullamcorper auctor, ipsum elit dignissim lectus, in consequat ligula diam eu erat. Donec sit amet justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et tortor eu magna consequat laoreet. Praesent leo justo, fermentum et, blandit ac, viverra non, ante. Fusce gravida aliquet tellus. Etiam iaculis, mi vel ultricies tempor, augue sem porta enim, a aliquam purus dui nec elit. Etiam in mauris nec ligula tincidunt placerat. Nulla in libero sed arcu aliquet porttitor. Aliquam erat volutpat. Phasellus et arcu. Donec dapibus eros eu ligula. Curabitur egestas justo at ligula. Fusce quis eros vitae sapien fringilla bibendum. Ut faucibus ultrices lorem. </p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mollis tortor. Nulla consectetuer. Nunc metus. Aliquam porta ultricies ipsum. Maecenas eu mi. Duis dictum, enim in ullamcorper auctor, ipsum elit dignissim lectus, in consequat ligula diam eu erat. Donec sit amet justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et tortor eu magna consequat laoreet. Praesent leo justo, fermentum et, blandit ac, viverra non, ante. Fusce gravida aliquet tellus. Etiam iaculis, mi vel ultricies tempor, augue sem porta enim, a aliquam purus dui nec elit. Etiam in mauris nec ligula tincidunt placerat. Nulla in libero sed arcu aliquet porttitor. Aliquam erat volutpat. Phasellus et arcu. Donec dapibus eros eu ligula. Curabitur egestas justo at ligula. Fusce quis eros vitae sapien fringilla bibendum. Ut faucibus ultrices lorem. </p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mollis tortor. Nulla consectetuer. Nunc metus. Aliquam porta ultricies ipsum. Maecenas eu mi. Duis dictum, enim in ullamcorper auctor, ipsum elit dignissim lectus, in consequat ligula diam eu erat. Donec sit amet justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et tortor eu magna consequat laoreet. Praesent leo justo, fermentum et, blandit ac, viverra non, ante. Fusce gravida aliquet tellus. Etiam iaculis, mi vel ultricies tempor, augue sem porta enim, a aliquam purus dui nec elit. Etiam in mauris nec ligula tincidunt placerat. Nulla in libero sed arcu aliquet porttitor. Aliquam erat volutpat. Phasellus et arcu. Donec dapibus eros eu ligula. Curabitur egestas justo at ligula. Fusce quis eros vitae sapien fringilla bibendum. Ut faucibus ultrices lorem. </p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mollis tortor. Nulla consectetuer. Nunc metus. Aliquam porta ultricies ipsum. Maecenas eu mi. Duis dictum, enim in ullamcorper auctor, ipsum elit dignissim lectus, in consequat ligula diam eu erat. Donec sit amet justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et tortor eu magna consequat laoreet. Praesent leo justo, fermentum et, blandit ac, viverra non, ante. Fusce gravida aliquet tellus. Etiam iaculis, mi vel ultricies tempor, augue sem porta enim, a aliquam purus dui nec elit. Etiam in mauris nec ligula tincidunt placerat. Nulla in libero sed arcu aliquet porttitor. Aliquam erat volutpat. Phasellus et arcu. Donec dapibus eros eu ligula. Curabitur egestas justo at ligula. Fusce quis eros vitae sapien fringilla bibendum. Ut faucibus ultrices lorem. </p>

</body>
</html>
As you can see, the replace function is doing its job nicely. Every time the alert box pops up the second round of code, the word "ipsum" is replaced by "MUPSI." But when you tell it to actually apply the markup to the page, it throws an "unknown runtime error."

If you can get past this, I think you'll have your answer. Hopefully this gets you most of the way there. Sorry I can't figure out the last component :(
alMubarmij
01-01-2007, 07:27 AM
Thank you, but I think this code is wrong.
I run it on IE & Firefox and all script was appears in alert boxes.

please, try it again.
alMubarmij
01-01-2007, 02:50 PM
is there another solution or method?
drhowarddrfine
01-01-2007, 04:00 PM
Probably unrelated but you should use a proper doctype. Replace the one above with this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
alMubarmij
01-01-2007, 04:08 PM
Now I got two blank alerts.

I used before: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
The first problem appears also when I remove <!DOCTYPE..> tag.
the_pm
01-01-2007, 04:46 PM
Probably unrelated but you should use a proper doctype. Replace the one above with this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Yeah, I was being sloppy, since this is just an example, and quirks v. standards mode doesn't apply to ECMA standards (not that I'm aware, anyway). I don't see OP using the doctype I posted, since it is superfluous to the script.

But the point is duly noted. alMubarmij, don't use the doctype I posted. It's just there to fill space.