Replace all <br> in a div in current document

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Lasse
    #1

    Replace all <br> in a div in current document

    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="JavaS cript"><!--
    function brTest(){
    var d=document.getE lementById;
    d("mybrid").inn erHTML=d("mybri d").innerHTML.r eplace(/<br>/gim,"&nbsp;");
    }
    //--></SCRIPT>
    <form>
    <button onclick="brTest ();">Call brTest()</button>
    </form>
    </body>
    </html>
    Tags: None
    • Lasse Reichstein Nielsen
      #2
      Re: Replace all &lt;br&gt; in a div in current document

      lars.oscarsson@ varbostad.se (Lasse) writes:
      [color=blue]
      > 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 ;-)[/color]

      I have had cases where
      element.innerHT ML = element.innerHT ML
      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.getEle mentById("mybri d").getElements ByTagName("br") ;
      for(var i=brs.length-1;i>=0;i--) {
      var elem = brs[i];
      elem.parentNode .removeChild(el em);
      }
      }
      </script>

      (no language attribute on the script tag and no HTML comments in the
      script area!)
      [color=blue]
      > It should be fast and if possible compatible with todays modern
      > browser-standards.[/color]

      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 - lrn@hotpop.com
      Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
      'Faith without judgement merely degrades the spirit divine.'

        Comment

        • Lasse Reichstein Nielsen
          #3
          Re: Replace all &lt;br&gt; in a div in current document

          lars.oscarsson@ varbostad.se (Lasse) writes:
          [color=blue]
          > 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 ;-)[/color]

          I have had cases where
          element.innerHT ML = element.innerHT ML
          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.getEle mentById("mybri d").getElements ByTagName("br") ;
          for(var i=brs.length-1;i>=0;i--) {
          var elem = brs[i];
          elem.parentNode .removeChild(el em);
          }
          }
          </script>

          (no language attribute on the script tag and no HTML comments in the
          script area!)
          [color=blue]
          > It should be fast and if possible compatible with todays modern
          > browser-standards.[/color]

          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 - lrn@hotpop.com
          Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
          'Faith without judgement merely degrades the spirit divine.'

            Comment

            • Martin Honnen
              #4
              Re: Replace all &lt;br&gt; in a div in current document



              Lasse wrote:[color=blue]
              > 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="JavaS cript"><!--
              > function brTest(){
              > var d=document.getE lementById;
              > d("mybrid").inn erHTML=d("mybri d").innerHTML.r eplace(/<br>/gim,"&nbsp;");
              > }
              > //--></SCRIPT>
              > <form>
              > <button onclick="brTest ();">Call brTest()</button>
              > </form>
              > </body>
              > </html>[/color]

              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.getEle mentById):

              <html>
              <head>
              <title>replacin g <br> elements</title>
              <script type="text/javascript">
              function replaceBRs (elementId, replacementText ) {
              var element, brs;
              if (document.getEl ementById) {
              element = document.getEle mentById(elemen tId);
              if (element && element.getElem entsByTagName &&
              document.create TextNode) {
              brs = element.getElem entsByTagName(' br');
              while (brs.length) {
              var br = brs[brs.length - 1];
              var replacement = document.create TextNode(replac ementText);
              br.parentNode.r eplaceChild(rep lacement, br);
              }
              }
              }
              }
              </script>
              </head>
              <body>
              <p>
              <input type="button" value="replace brs"
              onclick="replac eBRs('testDiv', String.fromChar Code(160));">
              </p>
              <div id="testDiv">
              <a href="http://JavaScript.faqt s.com/">
              JavaScript FAQTs
              <br>
              JavaScript Questions and Answers
              </a>
              <br>
              <p>
              All for Kibology.
              <br>
              Kibology for all.
              </p>
              </div>
              </body>
              </html>



              --

              Martin Honnen
              Attention Required! | Cloudflare
              http://JavaScript.FAQTs.com/


                Comment

                • Martin Honnen
                  #5
                  Re: Replace all &lt;br&gt; in a div in current document



                  Lasse wrote:[color=blue]
                  > 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="JavaS cript"><!--
                  > function brTest(){
                  > var d=document.getE lementById;
                  > d("mybrid").inn erHTML=d("mybri d").innerHTML.r eplace(/<br>/gim,"&nbsp;");
                  > }
                  > //--></SCRIPT>
                  > <form>
                  > <button onclick="brTest ();">Call brTest()</button>
                  > </form>
                  > </body>
                  > </html>[/color]

                  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.getEle mentById):

                  <html>
                  <head>
                  <title>replacin g <br> elements</title>
                  <script type="text/javascript">
                  function replaceBRs (elementId, replacementText ) {
                  var element, brs;
                  if (document.getEl ementById) {
                  element = document.getEle mentById(elemen tId);
                  if (element && element.getElem entsByTagName &&
                  document.create TextNode) {
                  brs = element.getElem entsByTagName(' br');
                  while (brs.length) {
                  var br = brs[brs.length - 1];
                  var replacement = document.create TextNode(replac ementText);
                  br.parentNode.r eplaceChild(rep lacement, br);
                  }
                  }
                  }
                  }
                  </script>
                  </head>
                  <body>
                  <p>
                  <input type="button" value="replace brs"
                  onclick="replac eBRs('testDiv', String.fromChar Code(160));">
                  </p>
                  <div id="testDiv">
                  <a href="http://JavaScript.faqt s.com/">
                  JavaScript FAQTs
                  <br>
                  JavaScript Questions and Answers
                  </a>
                  <br>
                  <p>
                  All for Kibology.
                  <br>
                  Kibology for all.
                  </p>
                  </div>
                  </body>
                  </html>



                  --

                  Martin Honnen
                  Attention Required! | Cloudflare
                  http://JavaScript.FAQTs.com/


                    Comment

                    • Lars Oscarsson
                      #6
                      Re: Replace all &lt;br&gt; in a div in current document

                      Thanks a lot for your suggestions. It is a much cleaner way to do this.
                      One reason why i did not use getElementsByTa gName("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!

                        Comment

                        • Lars Oscarsson
                          #7
                          Re: Replace all &lt;br&gt; in a div in current document

                          Thanks a lot for your suggestions. It is a much cleaner way to do this.
                          One reason why i did not use getElementsByTa gName("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!

                            Comment

                            Previous template Next
                            Working...