Replace all <br> in a div in current document

L

Lasse

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>
 
L

Lasse Reichstein Nielsen

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
 
M

Martin Honnen

Lasse said:
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>
 
L

Lars Oscarsson

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top