如何通过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))
)