JavaScript/jQuery/REGEX: Replace multiple <br> tags with exactly two <br> tags

hankknight
hankknight used Ask the Experts™
on
Using JavaScript / jQuery and REGEX, how can I replace all sets of more than two <br> tags with exactly two <br /> tags?

<br /><br><br /><br/><br>
Should become
<br /><br />

Please test your solution with the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
 $('div').each(function() {
  $(this).html( fixBR($(this).html()) );
 });
});

function fixBR (str) {
 return str;
}

</script>
</head>
<body>

<div>
 <p>
 Hello World.<br><br /><br /><br /><br /><br/>
 This is a test.<br /><br /><br /><br />Testing<br>
 <br /><br/>There should be a maximum of two br tags beteween each line of text.
 </p>
</div>

<div>
 1234567890<br><br /><br /><br /><br /><br/>
 This is a test.<br /><br /><br /><br />Testing<br>
</div>

</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
ǩa̹̼͍̓̂ͪͤͭ̓u͈̳̟͕̬ͩ͂̌͌̾̀ͪf̭̤͉̅̋͛͂̓͛̈m̩̘̱̃e͙̳͊̑̂ͦ̌ͯ̚d͋̋ͧ̑ͯ͛̉Glanced up at my screen and thought I had coded the Matrix...  Turns out, I just fell asleep on the keyboard.
Most Valuable Expert 2011
Top Expert 2015
Commented:
You may try this:

var regex = /(<br\s*/?>\s*){2,}/g;
var result = regex.replace(input, "<br />");

Open in new window

In Javascript you can simply do a regular expression replace with

(<[Bb][Rr]\s*\/?>\s*){2,}

as the regular expression, and

<br/><br/>

as the replacement.

So something like...

var re = new RegExp('(<[Bb][Rr]\s*\/?>\s*){2,}', "g");
var result = subject.replace(re, '<br/><br/>');

... should put the results in to the variable result. Unfortunately I only had a chance to test the regular expression one line at a time on a few of your lines above at... http://www.regular-expressions.info/javascriptexample.html

Author

Commented:
Thank you both.

kaufmed, I get a JavaScript error with your solution.
philkeene, your solution works for me.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
 $('div').each(function() {
  $(this).html( fixBR($(this).html()) );
 });
});

function fixBR (str) {
 var regex =  new RegExp('(<[Bb][Rr]\s*\/?>\s*){2,}', "g");
 return str.replace(regex, "<br /><br />");
}

</script>
</head>
<body>

<div>
 <p>
 Hello World.<br><br /><br /><br /><br /><br/>
 This is a test.<br /><br /><br /><br />Testing<br>
 <br /><br/>There should be a maximum of two br tags beteween each line of text.
 </p>
</div>

<div>
 1234567890<br><br /><br /><br /><br /><br/>
 This is a test.<br /><br /><br /><br />Testing<br>
</div>

</body>
</html>

Open in new window

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

ǩa̹̼͍̓̂ͪͤͭ̓u͈̳̟͕̬ͩ͂̌͌̾̀ͪf̭̤͉̅̋͛͂̓͛̈m̩̘̱̃e͙̳͊̑̂ͦ̌ͯ̚d͋̋ͧ̑ͯ͛̉Glanced up at my screen and thought I had coded the Matrix...  Turns out, I just fell asleep on the keyboard.
Most Valuable Expert 2011
Top Expert 2015

Commented:
Forgot to escape the forward slash  : \
If it's any consolation I started writing before you posted. Didn't purposefully swoop in to the steal.
ǩa̹̼͍̓̂ͪͤͭ̓u͈̳̟͕̬ͩ͂̌͌̾̀ͪf̭̤͉̅̋͛͂̓͛̈m̩̘̱̃e͙̳͊̑̂ͦ̌ͯ̚d͋̋ͧ̑ͯ͛̉Glanced up at my screen and thought I had coded the Matrix...  Turns out, I just fell asleep on the keyboard.
Most Valuable Expert 2011
Top Expert 2015

Commented:
Honestly, I hadn't even looked at your pattern, so I wouldn't have noticed the similarity if you didn't mention it  = )

The only change I would have suggested to yours is to use the "i" flag rather two bracket expressions. Not a major thing; just slightly more readable, IMO.

Author

Commented:
kaufmed, thanks for pointing out the slash.  You also put the regex var in the wrong place in replace.  But here it is fixed, for the record:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
 $('div').each(function() {
  $(this).html( fixBR($(this).html()) );
 });
});

function fixBR (str) {
 var regex = /(<br\s*\/?>\s*){2,}/g;
 return str.replace(regex, '<br /><br />');
}

</script>
</head>
<body>

<div>
 <p>
 Hello World.<Br>   <BR />  <BR /><br />

<br /><br/>
 This is a test.<br /><BR /><br /><BR />Testing<br>
 <br /><br/>There should be a maximum of two br tags beteween each line of text.
 </p>

 1234567890<br><br /><br /><br /><br /><br/>
 This is a test.<br /><br /><br /><br />Testing<br>

</div>

</body>
</html>

Open in new window

ǩa̹̼͍̓̂ͪͤͭ̓u͈̳̟͕̬ͩ͂̌͌̾̀ͪf̭̤͉̅̋͛͂̓͛̈m̩̘̱̃e͙̳͊̑̂ͦ̌ͯ̚d͋̋ͧ̑ͯ͛̉Glanced up at my screen and thought I had coded the Matrix...  Turns out, I just fell asleep on the keyboard.
Most Valuable Expert 2011
Top Expert 2015

Commented:
So I did. Guess I need to brush up on my JS skills  = )

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial