从 textarea 中删除错误的 标签答案

【问题标题】：Remove errant tags from textarea从 textarea 中删除错误的 标签
【发布时间】：2019-07-10 17:05:26
【问题描述】：

我在 SharePoint 2013 中使用 textarea 富文本编辑器文本编辑器，它有一个令人讨厌的习惯，即在标签末尾的幕后 html 标记中添加额外的中断标记，如下所示：

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

在此示例中，段落中间的 br 是用户插入的，但 h1 和 ul 标签末尾的那些是不可取的，我想删除它们。我想不出在另一个结束标记之前的
有效的情况，所以这是我的计划。

我想在任何其他结束标记之前找到所有 br 标记并将它们删除。

我们可以使用 vanilla javascript，但 jQuery 已经在页面上用于其他用途。

我找到了this thread，它提供了一个正则表达式解决方案，可以在关闭 h2 之前删除 br。它是 php，提供的算法多于实现。还有第二种解决方案是“使用 DOM 解析器”。但我对此并不熟悉。

另外一些添加的标签是 ，一些是 。可能有也可能没有换行符和空格。

有没有一种方法可以在任何其他有效结束标记之前（忽略任何换行符或空格）查找所有   或  ？

【问题讨论】：

标签： javascript jquery html rich-text-editor

【解决方案1】：

使用 jQuery 覆盖显示的案例。当您发现其他未涵盖的情况时，可以添加到它

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

【讨论】：

注意：考虑了一下之后....$br.next().is('br') 条件可能有问题，会忽略其中两个之间的文本

【解决方案2】：

如果 HTML 在字符串中，一个简单的 RegEx 替换可以删除你想要的：

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

RegEx 匹配的都是<br，后面跟着可选的/，后面跟着></；然后它用该结束标记的开头替换它，从而删除中断。在这种情况下，您也可以不使用反向引用来执行此操作，因为结束标记的开头是恒定的且已知的：

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

【讨论】：