51

如何使用 JavaScript 进行检测

<br>
<br>
<br>

成为一个

<br>

?

我试过：

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

但这对我不起作用。

4

9 回答 9

172

CSS 解决方案

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

br + br { display: none; }

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

<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';
        }
    }
};
于 2013-06-12T09:26:24.873 回答
10

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

如何修复所有静态 HTML 和 HTML 生成，以便这些多余<br>的元素不会首先出现？

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

于 2013-06-12T17:45:31.030 回答
8

更简单：

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

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

于 2013-06-12T09:29:07.437 回答
1

这样的事情不是正确的方法吗：

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

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

于 2013-06-12T13:15:49.273 回答
1

此解决方案仅适用于 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/

于 2017-11-15T11:40:00.807 回答
0

试试这个

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

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

演示

于 2013-06-12T09:43:50.823 回答
0

我会这样做：

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

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

于 2013-06-18T20:14:50.447 回答
0

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

/(<br>*)+/g

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

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

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

/(<br\/>*)+/g
于 2020-03-14T21:59:32.737 回答
-1

试试这个：

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

演示： jsfiddle

于 2013-06-12T09:24:52.910 回答