2010-01-21 62 views
3

我正在寻找一些最有效的方法来删除尾随html < br />标记使用JavaScript或jQuery的一些想法。jQuery/JS,删除/修剪尾部html换行符?

规则:

  1. 的BR,在前端和末端必须被去除。
  2. 它必须删除非关闭和自闭br标签。
  3. 文本内容中的所有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> 
+1

我没有看到你所期望的输出如何您的规则匹配 – hunter 2010-01-21 17:57:32

+0

@猎人,我相信你是在谈论规则#1,我更新了它,并把它移到以规则#3,我相信它更具语法意义。 – Andrew 2010-01-21 18:00:20

回答

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

试试这个:

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的工作,我已经尽力了。

+0

这似乎是清除img标记,如果它是唯一的行:

Andrew 2010-01-21 19:43:18

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); 
}) 
0

很简单。就拿generatedContent的HTML DIV然后采用下列正则表达式:

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

有可能使用纯JS做更有效的方式,但是这可能是更succint。

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();