jQuery/JS，删除/修剪尾随 html 换行符？答案

【问题标题】：jQuery/JS, removing/trimming trailing html line breaks?jQuery/JS，删除/修剪尾随 html 换行符？
【发布时间】：2011-01-07 20:36:39
【问题描述】：

我正在寻找使用 javascript 或 jquery 删除尾随 html br/> 标记的最有效方法的一些想法。

规则：

必须移除前端和末端的 br。

它必须删除非关闭和自关闭 br 标记。

文本内容中的所有 br 都必须保持不变。

HTML：

<div class="generatedContent">
    <br>My awesome content.
    <br><br>Some More awesome content.
    <br>
    <br>
    <br>I still need the content written here<br/>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</div>

所需的输出：

<div class="generatedContent">
    My awesome content.
    <br><br>Some More awesome content.
    <br>
    <br>
    <br>I still need the content written here
</div>

【问题讨论】：

我看不出你想要的输出如何匹配你的规则
@Hunter，我相信你在谈论规则#1，我对其进行了更新并将其移至规则#3，我认为这更符合语法意义。

标签： javascript jquery html regex jquery-1.4

【解决方案1】：

试试这个：

var everything = $('.generatedContent').contents();
for(var i=everything.length-1;i>0;i--)
{
    if((everything.get(i).tagName == 'BR'
           && everything.get(i-1).tagName == 'BR')
        || (everything.get(i).textContent.match(/\w/)==null))
        $(everything.get(i)).remove();
    else
        break;
}

我试过了，似乎在 FF 和 IE7 中都可以工作。

【讨论】：

这似乎正在清除一个 img 标签，如果它是该行中唯一的东西：
跨度>

【解决方案2】：

可能会有所改进，但应该可以：

$('.generatedContent').each(function() {
    var str = $(this).html();
    var regex1 = /^([\n ]*)(<br.*?>)*/;
    var regex2 = /(<br.*?>)*([\n ]*)$/;
    str = str.replace(regex1,'');
    str = str.replace(regex2,'');
    $(this).html(str);
})

【讨论】：

【解决方案3】：

很简单。获取 generatedContent div 的 HTML，然后应用以下正则表达式：

s = s.replace(/^(\s*<br\s*\/?>)*\s*|\s*(<br\s*\/?>\s*)*$/g, '')

使用纯 JS 可能有更有效的方法，但这可能更简洁。

【讨论】：

【解决方案4】：

这是一个适用于 Firefox 的非正则表达式解决方案。可能可以使用一些更好的边缘案例处理，但这个想法有效。基本上它只是找到第一个和最后一个非空文本节点并删除之前和之后的所有节点。

var firstValidTextNode = -1;
var lastValidTextNode = -1;
$('.generatedContent').contents().each(function(index){
    if (this.nodeType != 1 && $.trim($(this).text()).length) {
        if (firstValidTextNode == -1) firstValidTextNode = index;
        lastValidTextNode = index;
    }
});

if (lastValidTextNode != -1 && firstValidTextNode != -1)
    $('.generatedContent').contents().slice(0, firstValidTextNode).remove().end().slice(lastValidTextNode + 1).remove();

【讨论】：

【解决方案5】：

无法理解您为什么要为此使用正则表达式，因为大多数答案都是如此。在这里使用 DOM 方法很容易：

function isBrOrWhitespace(node) {
    return node && ( (node.nodeType == 1 && node.nodeName.toLowerCase() == "br") ||
           (node.nodeType == 3 && /^\s*$/.test(node.nodeValue) ) );
}

function trimBrs(node) {
    while ( isBrOrWhitespace(node.firstChild) ) {
        node.removeChild(node.firstChild);
    }
    while ( isBrOrWhitespace(node.lastChild) ) {
        node.removeChild(node.lastChild);
    }
}

$(".generatedContent").each( function() {
    trimBrs(this);
} );

【讨论】：