如何通過javascript去除段落中的br標簽

Question

如何使用 javascript（僅）從段落中刪除所有<br>標記。 這是我試圖從中刪除的HTML代碼：

<p>
    Aenean odio dui, facilisis ut convallis in, congue quis mi. Etiam eu tristique metus. Vivamus id orci ac sapien porttitor pulvinar ut et dui. Phasellus porttitor quam dictum magna faucibus sollicitudin ac sit amet lectus.<br>
    <br><br>
    <a href="#"><i class="icon-facebook-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-twitter-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-google-plus-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-phone-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-pinterest-sign" style="color:#; font-size:px; "></i></a>
</p>

我知道如何使用 jquery 刪除它。但我想通過純 javascript 刪除它。

Answer 1

在jQuery中

$('p').find('br').remove();

的JavaScript

var para=document.getElementById("para").innerHTML;
para = para.replace(/[<]br[^>]*[>]/gi,"");

<p id="para">
    Aenean odio dui, facilisis ut convallis in, congue quis mi. Etiam eu tristique metus. Vivamus id orci ac sapien porttitor pulvinar ut et dui. Phasellus porttitor quam dictum magna faucibus sollicitudin ac sit amet lectus.<br>
    <br><br>
    <a href="#"><i class="icon-facebook-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-twitter-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-google-plus-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-phone-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-pinterest-sign" style="color:#; font-size:px; "></i></a>
</p>

Answer 2

僅適用於現代瀏覽器 （IE8 +應該可以）-使用querySelectorAll

if (document.querySelectorAll) {
    var brs = document.querySelectorAll('p br');
    for (var i = 0; i < brs.length; i++) {
        brs[i].parentNode.removeChild(brs[i]);
    }
}

演示： 小提琴

---

嘗試這個舊的

if (document.querySelectorAll) {
    var brs = document.querySelectorAll('p br');
    for (var i = 0; i < brs.length; i++) {
        brs[i].parentNode.removeChild(brs[i]);
    }
} else {
    var ps = document.getElementsByTagName('p');
    for (var i = 0; i < ps.length; i++) {
        var brs = ps[i].getElementsByTagName('br');
        for (var j = brs.length - 1; j >= 0; j--) {
            brs[j].parentNode.removeChild(brs[j]);
        }
    }
}

演示： 小提琴

Answer 3

你可以試試這個嗎

 var e = document.getElementsByTagName("p")[0];
 e.innerHTML = e.innerHTML.replace('<br>', '');

演示

Answer 4

發布者想要一個僅JavaScript的答案。

var p = document.getElementsByTagName("p")[0];

p.innerHTML = p.innerHTML.replace(/<br>/g, '');

jsFiddle： http : //jsfiddle.net/DPqzP/1/

Answer 5

警告！

這將刪除所有的BR標簽。

docDesc = docDesc.replace(/[<]br[^>]*[>]/gi,"");

希望這可以幫助 ：）

Answer 6

這是另一種選擇。 可能會變慢。 但仍然有效：

var test = document.getElementsByTagName('p').innerHTML;
var new_string = test.split('<br>').join('');
document.getElementsByTagName('p').innerHTML = new_string;

Answer 7

由於您不應該使用regex解析HTML ，因此必須遍歷所有段落，然后遍歷該段落內的所有元素並檢查BR元素，然后將其刪除。

var p = document.getElementsByTagName('p');

for (var i=p.length; i--;) {
    (function it(el){
        if(el){
            if(!el.nodeName || !(/#text/i.test(el.nodeName))){
                if(el.firstChild){
                    it(el.firstChild);
                }
            }

            if(el.nextSibling){
                it(el.nextSibling)
            }
        }
        if (el.tagName && el.tagName.toLowerCase() == 'br') {
            el.parentNode.removeChild(el);
        }
    })(p[i]);
}

小提琴

Answer 8

將id / class添加到p標簽，以便您可以僅刪除帶有class / id的p的br標簽

var pContent = document.getElementById("ID").innerHTML;
var replacedContent = pContent.replace(/<br>/g,"");
document.getElementById('ID').innerHTML = replacedContent;

ID是p的id

如果使用類，則必須按標記名獲取元素，將其循環以匹配該類，然后執行此操作。

如果您不想提供ID /類，可以使用getElementsByTagName

Answer 9

我認為您希望避免因<br>而形成的假段落。 這個想法應該是將包含<br>的段落分解為多個段落。

let ps = document.getElementsByTagName('p')
let newps =
    ps
    |> Array.collect((p,attrs,children)=>
           let groups = splitbyBr(children)
           groups
           |> Array.map(group => p(attrs,group))
)