用多个<br>replace多个<br>
我如何使用JavaScript来检测
<br> <br> <br>
成为一个
<br>
?
我试着用:
jQuery('body').html().replace(/(\<br\>\r\n){3, }/g,"\n");
但这不适合我。
更简单:
var newText = oldText.replace(/(<br\s*\/?>){3,}/gi, '<br>');
这将允许可选的标签终结符(/>),也可以在标签结束之前的空格(例如<br />
或<br >
)。
CSS解决scheme
如果你想在页面上禁用多个<br>
的效果,你可以通过CSS来完成,而不使用JavaScript:
br + br { display: none; }
- 检查jsFiddle演示 。
但是,当您使用标签时,此方法是理想的,如下所示:
<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解决scheme。
JavaScript解决scheme
// 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演示 。
发送不需要的HTML格式到客户端浏览器并使其运行JavaScript代码来清理它的意义何在? 这看起来像一个糟糕的devise。
如何修复所有的静态HTML和HTML代,以便这些多余的<br>
元素不首先发生?
如果您使用JavaScript来修改文档对象,那么对于无法以其他方式实现的dynamic效果,请执行此操作。
这样的事情不是正确的做法:
$("br~br").remove()
编辑:不,这是错误的,因为它的“连续”的定义是太松,根据每个BoltClock。
尝试这个
$('body').html($('body').html().replace(/(<br>)+/g,"<br>"));
它将把n个数字代入一个。
演示
尝试这个:
jQuery('body').html( jQuery('body').html().replace(/(?:<br>\s+){3,}/ig,"\n")); );
演示: jsfiddle
我会去这个:
$('body').html($('body').html().replace(/<br\W?\\?>(\W?(<br\W?\\?>)+)+/g,"<br>"));
但是,在阅读另一篇文章中的评论之后,我认为你应该尽量避免这样做,以免在后端纠正。
这个解决scheme只是jQuery + DOM,不能像string那样操作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/