如何使用JavaScript删除html标记只保留BR、B和I标记

How to remove html tags with JavaScript keep only BR, B and I tags?

本文关键字:BR 标记 保留 JavaScript 何使用 删除 html      更新时间:2023-09-26

当用户单击按钮删除富文本并只保留BR B和I标记时,我想从div中删除富文本。我尝试过函数replace(/<'/?[^>]+(>|$)/g, ""),但它删除了所有标记。

<div id="content" contenteditable></div>
<button id="remove">Remove</button>
<script>
$(document).on('click', '#remove', function(e) {
    var a = $("#content").html();
    a = a.replace(/<'/?[^>]+(>|$)/g, "");
    $("#content").html(a);
});
</script>

示例输入
<p>paragraph 1 <b>bold</b></p><br><br><p>paragraph 2 <i>italic</i></p>

我想要什么
paragraph 1 <b>bold</b><br><br>paragraph 2 <i>italic</i>

只保留BR B和I标签

如果"b"或"br",不区分大小写,在匹配的中找不到,请尝试使用.replace()的函数参数返回空字符串

$(document).on('click', '#remove', function(e) {
    var a = $("#content").html();
    a = a.replace(/<'/?[^>]+(>|$)/g, function(match) {       
      return !/br|b/i.test(match) ? "" : match
    });
    $("#content").html(a);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content" contenteditable>
<p>paragraph 1 <b>bold</b></p><br><br><p>paragraph 2</p>
</div>
<button id="remove">Remove</button>