2010-01-21 60 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();