Avatar of hankknight
hankknight
Flag for Canada asked on

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

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

JavaScriptRegular Expressions

Avatar of undefined
Last Comment
kaufmed

8/22/2022 - Mon
SOLUTION
kaufmed

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER CERTIFIED SOLUTION
Member_2_6009151

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
hankknight

ASKER
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

kaufmed

Forgot to escape the forward slash  : \
Member_2_6009151

If it's any consolation I started writing before you posted. Didn't purposefully swoop in to the steal.
Your help has saved me hundreds of hours of internet surfing.
fblack61
kaufmed

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.
hankknight

ASKER
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

kaufmed

So I did. Guess I need to brush up on my JS skills  = )
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.