SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:
    Code:
      
    item.innerHTML
    
    or:
    
    document.layers.innerHTML // for Gecko 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 ?

  2. #2
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Document.layers and document.all are pretty outdated. You might want to look into the more current W3C DOM conventions, which are pretty cross-browser. Layers is Netscape 4 and all is IE 4. Since then browsers have standardized on the W3C recommendations.

    JavaScript also has a String.replace() method that uses a regular expression to search for text in a string and replaces it with a specified string. The trick is finding the strings in the first place. For that I imagine you would need to loop through the children of the body element, checking node type and processing a node if its type is text (nodeType 3).

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    character replacing

    Well since none of those characters are likely to show up in the URL of a link, you could just use:

    Code:
    function characterReplace() {
        var page = document.getElementsByTagName("body")[0];
        pageAll = page.innerHTML;
        pageAll = pageAll.replace(/001/, "&");
        pageAll = pageAll.replace(/\\n/, "nbsp;");
        pageAll = pageAll.replace(/\#/, "@");
        var nastyWords = new Array(   
             "insert", "your", "nasty", "words", "here", "in", "lower", "case"
        );
        var lowerCasePageAll = pageAll.toLowerCase();
        var matches;
        var myRegExp;
        for (var i; i < nastyWords.length; i++) {
             myRegExp = new RegExp (nastywords[i]);
             while (matches = myRegExp.test(lowerCasePageAll)) {
                    pageAll = pageAll.substr(0, pageAll.indexOf(nastywords[i]) ) + "****" + pageAll.substr(pageAll.indexOf(nastywords[i]));
             } 
        }
        page.innerHTML = pageAll;
        return;
    }
    
    window.onload = characterReplace();
    Of course I haven't actually tested this. My suggestion though is to do the character replacement with some server side language instead since JS is often disabled in the users browser.

    Dave

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alMubarmij View Post
    Code:
      
    document.layers.innerHTML // for Gecko engine browsers.
    The gecko engine never supported document.layers

  5. #5
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    The gecko engine never supported document.layers
    Good point. It was a dead-end with Navigator 4, the rendering engine of which was a cobbled-together mess based on Mosaic (much like another browser which I won't name, but its initials are IE). Gecko was specifically undertaken to clean up the mess and became the key component of the Mozilla project. The Mozilla name, in fact, derives from the description, "Mosaic killer".

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JVLB View Post
    It was a dead-end with Navigator 4, the rendering engine of which was a cobbled-together mess based on Mosaic
    Netscape Navigator was NEVER based on Mosaic. The original Netscape was written by the same programmers as wrote Mosaic after they left the University and set up their own company. Netscape was intended as a Mosaic killer and generally succeeded at that task until Microsoft managed to get Spyglass to give Mosaic to them so they could rename it to IE and even then it took up to version 4 before IE drew level with Netscape.

    Unfortunately by version 4 both browsers had been patched to the extreme making further enhancements very complex to do and so the Netscape people decided to start over from scratch. As Microsoft decided to push ahead with patching their already outdated browser that enabled them to capture most of the browser market but made it impossible for Microsoft to produce a standards compliant browser without scrapping IE and building or buying a replacement (which would lose them market share even faster than they already are).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gee, then why was it originally called Mosaic Netscape? And why does Marc Andreesen think there was a relationship?

  8. #8
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please stop talking about Mosaic, Netscape and other, the mistake was from my side.
    and I'm sorry for my old information.
    I learned JavaScript from old books and I was using Netscape Navigator & IE 3.2 and 4.0 on 1998 or 1999.
    I was thinking that Gecko engine was started with Navigator (but the true is: it's started with Mozilla).

    So, you can skip my bad idea about "Gecko","document.layers" and "document.all", and help me for that code, please..

  9. #9
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While it's rather a blunt instrument, dwees solution should work. Have you tried it?

  10. #10
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dwees:

    your code is very nice and useful, but it's replace one charactor only, and if it repeated again it's does noting.

    So, can you fix that ?
    or do you have another method ?
    Last edited by alMubarmij; Jan 1, 2007 at 10:23.

  11. #11
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function characterReplace() {
        var page = document.getElementsByTagName("body")[0];
        pageAll = page.innerHTML;
        pageAll = pageAll.replace(/001/g, "&");
        pageAll = pageAll.replace(/\\n/g, "&nbsp;");
        pageAll = pageAll.replace(/\#/g, "@");
        var nastyWords = new Array(   
             "insert", "your", "nasty", "words", "here", "in", "lower", "case"
        );
        var lowerCasePageAll = pageAll.toLowerCase();
        var matches;
        var myRegExp;
        for (var i; i < nastyWords.length; i++) {
             myRegExp = new RegExp (nastywords[i]);
             while (matches = myRegExp.test(lowerCasePageAll)) {
                    pageAll = pageAll.substr(0, pageAll.indexOf(nastywords[i]) ) + "****" + pageAll.substr(pageAll.indexOf(nastywords[i]));
             } 
        }
        page.innerHTML = pageAll;
        return;
    }
    
    window.onload = characterReplace();
    Yeah fixed, realized I forgot to make the regular expressions defined in the beginning of the script global, should work fine now.

    I'm working on getting the 2nd part to work properly, and I've made an error of some sort, which I will be able to sort out in a few days when I'm at home and properly rested (vacations with family are so tiring!).

    Dave

  12. #12
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, dwees.
    It's very nice and small code.

    But the script work only when I but:
    Code:
    <body  onload="characterReplace();">
    I want to put the code on the header for many pages, and it's easier for me to be a one place in <header>.
    So, have you a solution ?

  13. #13
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code:
    window.onload = setTimeout("characterReplace()", 50);
    and adjust the 50 to match whatever the actual page load is of your pages. You should be able to avoid a flicker if you set this small enough.

  14. #14
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The timeout delay really shouldn't be necessary, as window.onload shouldn't fire until all content has loaded.

  15. #15
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    window.onload

    It shouldn't, but it does in some browsers.

    Dave

  16. #16
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And what browsers would that be?

  17. #17
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?
    Last edited by alMubarmij; Jan 10, 2007 at 11:19.

  18. #18
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A more explaination:

    I just wantto do 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.

  19. #19
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script>
    <script>
    var map = [
    	"&\#1200;","&\#1500;","&\#1220;","&\#1201;","&\#1202;",
    	"&\#1203;","&\#1204;","&\#1205;","&\#1206;","&\#1207;"
    ]
    
    var replaceDigits = function() {
    	document.body.innerHTML = 
    		document.body.innerHTML.replace(
    			/\d(?=[^<>]*(<|$))/g,
    			function($0) { return map[$0] }
    		);
    }
    
    window.onload = replaceDigits
    </script>
    Feel free to ask if you need explanations.

  20. #20
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's great, that realy what I need.
    but it's not work with Firefox, it's ran only on Internet Explorer.
    : (

  21. #21
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works for me. Are you getting any error messages?

  22. #22
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It won't work in Firefox with a large page because the onload event appears to go off before the text is completely loaded. I'd either use a small timeout to slow the script down, or put the function in the body tag and use an onload event there.

    Dave

  23. #23
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stereofrog View Post
    Works for me. Are you getting any error messages?
    Thank you very much.

    Now it worked fine in Firefox 2.0.0.1, Mozilla 1.7.3 and K-Meleon 1.02.
    and I think the script will be worked normally on any other browser based on Gecko engine.

    But I got another problem in Opera 9.02 and some previous browsers it's replaced some of other JavaScript codes and made some pages fully corrupted.

    So, can I replace an id or class item(s) only, not entire the page ?

    Thank you also Dave.
    Last edited by alMubarmij; Jan 14, 2007 at 03:41.

  24. #24
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here the complete code:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>My Replaced Charactors by JavaScript</title>
    
    <script type="text/javascript">
    var map = 
            [
    	"&\#171;","&\#187;","&\#164;","&\#149;","&\#176;",
    	"&\#133;","&\#174;","&\#169;","&\#153;","&\#163;"
            ]
    
    var replaceDigits = function() 
    {
    	document.body.innerHTML = 
    		document.body.innerHTML.replace(
    			/\d(?=[^<>]*(<|$))/g,
    			function($0) { return map[$0] }
    		);
    }
    
    window.onload = replaceDigits
    </script>
    
    </head>
    
    <body onload="replaceDigits()">
    <br />
    
    <hr />
       <pdo dir="ltr">
        <strong>
            My Replaced Charactors: <br />
            | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
            <br />
        </strong>
       </pdo>
    <hr />
    
    
    </body></html>

    But I wish now to replace an id or a class item(s) only, not entire the page.

    The following code doesn't work with me:

    Code:
    var replaceDigits = function() {
    var myid;
    	document.getElementById(myid).innerHTML = 
    		document.getElementById(myid).innerHTML.replace(
    			/\d(?=[^<>]*(<|$))/g,
    			function($0) { return map[$0] }
    		);
    }
    And I set an id like this:
    HTML Code:
    <div id="myid">
    But it's not work !
    Is something wrong here ?

  25. #25
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try

    Code:
    var myid = "myid";
    myid is a variable, which needs to have its value set to the string "myid".

    Dave


Bookmarks

Posting Permissions

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