asked on

JavaScript/jQuery/REGEX: Replace multiple tags with exactly two tags

Using JavaScript / jQuery and REGEX, how can I replace all sets of more than two tags with exactly two tags?

 
Should become
 

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

SOLUTION

kaufmed

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Member_2_6009151

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

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.

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 = )

JavaScript/jQuery/REGEX: Replace multiple &lt;br&gt; tags with exactly two &lt;br&gt; tags

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