.find 替换 html 标签内的内容

Question

我想清理我所见即所得的 html 标签。我想用另一个替换某些标签。这几乎只适用于 replaceWith() 也从标签中删除内容。我不想这样做。我只想更换标签。这是我目前所拥有的。

测试文本：

This<div>is</div><div>a test</div><div>to clean&nbsp;</div><div>some tags</div><div><br></div>

预期结果：

This<p>is</p><p>a test</p><p>to clean</p><p>some tags</p><p><br></p>

实际结果：

This<p></p><p></p><p></p><p></p><p></p>

这是我用来查找和替换的代码

var thebad = ["h1","h2","h3","h4","h5","h6","div"];
        var thegood = ["","","","","","","<p>"];
        for(var i = 0; i < thebad.length; i++){
            $('.content').contents().find('body').find(thebad[i]).replaceWith(thegood[i]);
        }

当我替换它们时，我需要弄清楚如何将文本保留在 html 标签内。

提前致谢

Answer 1

试试这个：

$('div').contents().unwrap().wrap('<p />'); 

编辑：

$('div').replaceWith(function(){ 
    return $("<p />").append($(this).contents()); 
});

Answer 2

试试这个：

var text = $("#test").html();
var replace_tags = { "<div>": "<p>", "</div>": "</p>",  "<div ": "<p "}; //edited
$.each( replace_tags, function(i,v){
     text = text.replace(new RegExp(i, 'g'),v);
});
//console.log(text);

测试日期：

<div id='test'>
    <h1>dummy text</h1>
    <div>dummy text</div>
    <h1>dummy text</h1>
    <p>dummy text</p>
    <div>dummy text</div>
</div>

结果：

<h1>sadsad</h1>
<p>sadsad</p>
<h1>fsdfsd</h1>
<p>dasdasdasdsad</p>
<p>sadsad</p>

Answer 3

$("div").replaceWith(function() {
    var $div = $(this);
    return $("<p />")
        //.attr('class', $div.attr('class')) // uncomment if you need to give back same class value
        .html($div.html());
});