用一个 <br> 替换多个 <br>

Question

如何使用 JavaScript 进行检测

<br>
<br>
<br>

成为一个人

<br>

?

我试过了：

jQuery('body').html().replace(/(\<br\>\r\n){3, }/g,"\n");

但这对我不起作用。

Answer 1

CSS 解决方案

如果你想在页面上禁用多个<br>的效果，你可以不使用JavaScript，通过CSS来实现：

br + br { display: none; }

• 检查jsFiddle demo。

但是，当您使用标签时，这种方法是理想的，如下所示：

<div>Text</div><br /><br /><br />
<div>Text</div><br /><br /><br />
<div>Text</div><br /><br /><br />

在其他情况下，像这样：

Hello World<br />   <br />
Hello World<br />   <br />
Hello World<br />   <br />

它将失败（因为 CSS 通过文本节点）。相反，请使用 JavaScript 解决方案。

---

JavaScript 解决方案

// It's better to wait for document ready instead of window.onload().
window.onload = function () {
    // Get all `br` tags, defined needed variables
    var br = document.getElementsByTagName('br'),
        l = br.length,
        i = 0,
        nextelem, elemname, include;
        
    // Loop through tags
    for (i; i < l - 1; i++) {
        // This flag indentify we should hide the next element or not
        include = false;
        
        // Getting next element
        nextelem = br[i].nextSibling;
        
        // Getting element name
        elemname = nextelem.nodeName.toLowerCase();
        
        // If element name is `br`, set the flag as true.
        if (elemname == 'br') {
            include = true;
        }
        
        // If element name is `#text`, we face text node
        else if (elemname == '#text') {
            // If text node is only white space, we must pass it.
            // This is because of something like this: `<br />   <br />`
            if (! nextelem.data.replace(/\s+/g, '').length) {
                nextelem = br[i+1];
                include = true;
            }
        }
        
        // If the element is flagged as true, hide it
        if (include) {
            nextelem.style.display = 'none';
        }
    }
};

• 检查jsFiddle demo。

Answer 2

以您不想要的形式将 HTML 发送到客户端浏览器并使其运行JavaScript 代码来清理它有什么意义？这看起来是个糟糕的设计。

如何修复所有静态 HTML 和 HTML 生成，以使这些多余的 <br> 元素一开始就不会出现？

如果您使用 JavaScript 修改文档对象，请为其他任何方式都无法实现的动态效果这样做。

Answer 3

更简单：

var newText = oldText.replace(/(<br\s*\/?>){3,}/gi, '<br>');

这将允许可选的标签终止符 (/>) 以及标签结束前的空格（例如 <br /> 或 <br >）。

Answer 4

这样的做法不正确吗：

$("br~br").remove()

编辑：不，这是错误的，因为根据 BoltClock 对“连续”的定义过于宽松。

Answer 5

此解决方案仅适用于 jQuery + DOM，不将 HTML 作为字符串操作，适用于文本节点，仅忽略空白文本节点：

$('br').each(function () {
  const {nodeName} = this;

  let node = this;

  while (node = node.previousSibling) {
    if (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim() !== '') {
      break;
    };
  }

  if (node && node !== this && node.nodeName === nodeName) {
    $(node).remove();
  }
});

见：https://jsfiddle.net/kov35jct/

Answer 6

试试这个

$('body').html($('body').html().replace(/(<br>)+/g,"<br>"));

它将n个<br>替换为一个。

Demo

Answer 7

我会选择这个：

$('body').html($('body').html().replace(/<br\W?\\?>(\W?(<br\W?\\?>)+)+/g,"<br>"));

但是，在阅读了此处另一篇文章中的 cmets 后，我确实认为您应该尽量避免这样做，以防您可以在后端进行更正。

Answer 8

这个问题的许多其他答案只会替换最多一定数量的元素，或者使用复杂的循环。我想出了一个简单的正则表达式，它可以用来用单个标签替换 any 数量的<br> 标签。这适用于字符串中多个标签的多个实例。

/(<br>*)+/g

要在 JavaScript 中实现这一点，您可以使用 String.replace 方法：

myString.replace(/(<br>*)+/g, "<br/>");

要替换多个<br/> 标签，请在正则表达式中添加/：

/(<br\/>*)+/g

Answer 9

试试这个：

jQuery('body').html(
      jQuery('body').html().replace(/(?:<br>\s+){3,}/ig,"\n"));
);

演示： jsfiddle