Question

如何使用JavaScript检测

<br>
<br>
<br>

成为一个

<br>

我尝试过：

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

但这不适合我。

Answer 1

CSS解决方案

如果要在页面上禁用多个 的效果，可以在不使用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生成，以便首先不会出现这些多余的 元素？

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

Answer 3

简单：

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

这将允许可选的标记终止符（/＆gt;）以及标记结束前的空格（例如 或 ）。

Answer 4

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

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

编辑：不，这是错的，因为它的定义是连续的＆＃34;根据BoltClock，太松了。

Answer 5

试试这个：

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

<强>样本： jsfiddle

Answer 6

试试这个

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

它会将n个 替换为一个。

Demo

Answer 7

我会这样做：

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

然而，在阅读了另一篇文章中的评论后，我确实认为你应该尽量避免这样做，以防你在后端纠正它。

Answer 8

此解决方案仅限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 9

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

<br>

要在JavaScript中实现此功能，可以使用/( *)+/g方法：

String.replace

要替换多个myString.replace(/( *)+/g, " ");标签，请在正则表达式中添加 ：

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

9 个答案:

CSS解决方案

JavaScript解决方案