消除错误 <br> 来自textarea的标签

Question

I'm using the textarea rich text editor text editor in SharePoint 2013 and it has a an annoying habit of adding extra break tags into the behind-the-scene html markup at the end of tags like this:

<h1>Some heading<br></h1>
<p>Intro paragraph with maybe an actual.<br>That is supposed to be here.</p>
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <br>
   <br>
</ul>

In this example the br in the middle of the paragraph is one that the user inserted, but the ones right at the end of the h1 and ul tags are not desirable and I would like to remove them. I can't think of a case where a
right before another closing tag is valid, so that is my plan.

I would like to find all br tags immediately before any other closing tag and remove them.

We could use vanilla javascript, but jQuery is already on the page for other things.

I found this thread which provides a regex solution to remove br right before a closing h2. It is php and provides more the algorithm than an implementation. There is a second solution there to "use a DOM parser." But I am not familiar with that.

Additionally some of the added tags are <br> and some are <br /> . And there may or may not be line returns and spaces.

Is there a method for finding all <br> or <br /> immediately before (ignoring any line returns or white spaces) any other valid closing tag?

Answer 1

Using jQuery to cover the cases shown. Can add to it as you find other cases not covered

 // get html string from main editor and put in temporary div const $html = $('<div>').append($('#editor').html()) let ctr = 0; // counter for demo/debugging only // hunt for unwanted culprits $html.find('br').each(function() { const $br = $(this); // remove at end of parent OR more than one together OR is in a UL as child if (!this.nextSibling || $br.next().is('br') || $br.parent().is('ul')) { ctr++ this.remove(); } }) console.log('removed =', ctr) console.log($html.html()) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="editor"> <h1>Some heading<br></h1> <p>Intro paragraph with maybe an actual.<br>That is supposed to be here.</p> <ul> <li>Item 1</li> <li>Item 2</li> <br> <br> </ul> </div> 

Answer 2

If the HTML there is in a string, a simple RegEx replacement can remove what you want:

htmlSourceCodeVar = htmlSourceCodeVar.replace(/<br(?: \/)?>(<\/)/ig, '$1');

What the RegEx matches is all <br , followed optionally by / , followed by ></ ; it then replaces it with the beginning of that closing tag, thus removing the break. You can also do it without backreferences in this case, since the start of a closing tag is constant and known:

htmlSourceCodeVar = htmlSourceCodeVar.replace(/<br(?: \/)?><\//ig, '</');