Replace all <br> in a div in current document

Discussion in 'Javascript' started by Lasse, Aug 10, 2003.

  1. Lasse

    Lasse Guest

    I have done this simple function, it seems to work as intended, to
    solve a problem i have had for a while. I couldnt find any sample
    around that was working for me.
    I would like to test it with you and see if there are any improvments
    that i should make ;-)
    It should be fast and if possible compatible with todays modern
    browser-standards. It should be activated by the onload-event.

    This is my code, free for all to use:

    <html><head>
    <title>brTest</title>
    </head>
    <body>
    <br>
    <div id=mybrid>
    <a id=myid1 href="#">Text 1 with<br>a linebreak (&lt;br&gt;)</a>
    <br clear="all">
    <a id=myid2 href="#">Text 2 with<br>a linebreak (&lt;br&gt;)</a>
    </div>
    <br>
    <a id=myid3 href="#">Text 3 with<br>a linebreak (&lt;br&gt;) that
    should remain as it is.</a>
    <br><br>
    <SCRIPT LANGUAGE="JavaScript"><!--
    function brTest(){
    var d=document.getElementById;
    d("mybrid").innerHTML=d("mybrid").innerHTML.replace(/<br>/gim,"&nbsp;");
    }
    //--></SCRIPT>
    <form>
    <button onclick="brTest();">Call brTest()</button>
    </form>
    </body>
    </html>
     
    Lasse, Aug 10, 2003
    #1
    1. Advertising

  2. (Lasse) writes:

    > I have done this simple function, it seems to work as intended, to
    > solve a problem i have had for a while. I couldnt find any sample
    > around that was working for me.
    > I would like to test it with you and see if there are any improvments
    > that i should make ;-)


    I have had cases where
    element.innerHTML = element.innerHTML
    changed how the page worked, mostly wrt. event handlers. Also,
    innerHTML is not compatible with modern standards (event if modern
    browsers understand it)

    I would prefer:

    <script type="text/javascript">
    function brTest(){
    var brs = document.getElementById("mybrid").getElementsByTagName("br");
    for(var i=brs.length-1;i>=0;i--) {
    var elem = brs;
    elem.parentNode.removeChild(elem);
    }
    }
    </script>

    (no language attribute on the script tag and no HTML comments in the
    script area!)

    > It should be fast and if possible compatible with todays modern
    > browser-standards.


    It is pure DOM 2 Core, so that should be compatible with modern
    browser standards. Tested in IE6, Mozilla Firebird 0.6, Opera
    7.2beta3.

    /L
    --
    Lasse Reichstein Nielsen -
    Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Aug 10, 2003
    #2
    1. Advertising

  3. Lasse wrote:
    > I have done this simple function, it seems to work as intended, to
    > solve a problem i have had for a while. I couldnt find any sample
    > around that was working for me.
    > I would like to test it with you and see if there are any improvments
    > that i should make ;-)
    > It should be fast and if possible compatible with todays modern
    > browser-standards. It should be activated by the onload-event.
    >
    > This is my code, free for all to use:
    >
    > <html><head>
    > <title>brTest</title>
    > </head>
    > <body>
    > <br>
    > <div id=mybrid>
    > <a id=myid1 href="#">Text 1 with<br>a linebreak (&lt;br&gt;)</a>
    > <br clear="all">
    > <a id=myid2 href="#">Text 2 with<br>a linebreak (&lt;br&gt;)</a>
    > </div>
    > <br>
    > <a id=myid3 href="#">Text 3 with<br>a linebreak (&lt;br&gt;) that
    > should remain as it is.</a>
    > <br><br>
    > <SCRIPT LANGUAGE="JavaScript"><!--
    > function brTest(){
    > var d=document.getElementById;
    > d("mybrid").innerHTML=d("mybrid").innerHTML.replace(/<br>/gim,"&nbsp;");
    > }
    > //--></SCRIPT>
    > <form>
    > <button onclick="brTest();">Call brTest()</button>
    > </form>
    > </body>
    > </html>


    Setting innerHTML means the browser needs to reparse the complete HTML
    content of the HTML and render it. If all you want is to replace some
    <br> elements then you can use the DOM (unless you want to cover IE4 but
    your solution doesn't do it with the use of document.getElementById):

    <html>
    <head>
    <title>replacing <br> elements</title>
    <script type="text/javascript">
    function replaceBRs (elementId, replacementText) {
    var element, brs;
    if (document.getElementById) {
    element = document.getElementById(elementId);
    if (element && element.getElementsByTagName &&
    document.createTextNode) {
    brs = element.getElementsByTagName('br');
    while (brs.length) {
    var br = brs[brs.length - 1];
    var replacement = document.createTextNode(replacementText);
    br.parentNode.replaceChild(replacement, br);
    }
    }
    }
    }
    </script>
    </head>
    <body>
    <p>
    <input type="button" value="replace brs"
    onclick="replaceBRs('testDiv', String.fromCharCode(160));">
    </p>
    <div id="testDiv">
    <a href="http://JavaScript.faqts.com/">
    JavaScript FAQTs
    <br>
    JavaScript Questions and Answers
    </a>
    <br>
    <p>
    All for Kibology.
    <br>
    Kibology for all.
    </p>
    </div>
    </body>
    </html>



    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Aug 10, 2003
    #3
  4. Thanks a lot for your suggestions. It is a much cleaner way to do this.
    One reason why i did not use getElementsByTagName("br") as identifier
    was that i would like to keep <br clear="all">
    Well, i could use <p> instead.
    I will try it out.
    /Lasse

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    Lars Oscarsson, Aug 10, 2003
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Some One
    Replies:
    5
    Views:
    814
    Toby A Inkster
    Aug 9, 2003
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    755
  3. Jim Ley
    Replies:
    3
    Views:
    207
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    194
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    317
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page