jQuery / JS,删除/修剪尾随html换行符?

时间:2010-01-21 17:33:58

标签: javascript jquery html regex jquery-1.4

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

规则:

  
      
  1. 必须删除前端和后端的br。
  2.   
  3. 必须删除非关闭和自动关闭的br标签。
  4.   
  5. 文字内容中的所有内容都必须保持不变。
  6.   

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>

5 个答案:

答案 0 :(得分:4)

无法理解你为什么要使用正则表达式,因为大多数答案都是。使用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);
} );

答案 1 :(得分: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,我尝试过。

答案 2 :(得分:1)

可能会有所改进但它应该有效:

$('.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 :(得分:0)

非常简单。获取generatedContent div的HTML,然后应用以下正则表达式:

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

使用纯JS可能有一种更有效的方法,但这可能更多的是succint。

答案 4 :(得分:0)

这是一个非常有效的解决方案,适用于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();