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

仅适用于modern browsers（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]);
    }
}

演示：Fiddle

尝试旧版

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

演示：Fiddle

Answer 3

你能试试吗，

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

demo

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

As you shouldn't parse HTML with regex，你必须遍历所有段落，然后遍历段落中的所有元素并检查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]);
}

FIDDLE

Answer 8

将id / class添加到p标记，以便您只能删除带有class / id

的p表单

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

ID是p

的ID

如果你使用类，那么你必须按标签名称获取元素，循环它以匹配类，然后执行此操作。

如果您不想提供id / class，可以使用getElementsByTagName

如何通过javascript从段落中删除br标签

8 个答案: