将HTML标签替换为另一个标签，然后删除其他标签

Question

我有一个textarea ，用户可以在其中编辑一些文本，允许他们使用html（我知道所有用户并信任他们），然后将该textarea的内容保存在数据库中。 然后将printet放入元素中。

如何使用<b>标签替换所有标题<h1><h2><h3>等，然后删除与<b>和<p>不同的所有标签

用户输入将存储在这样的变量中：

column_content = $('.dialog_editor').val();

Answer 1

尝试

$('.dialog_editor').change(function () {
    var column_content = $('.dialog_editor').val();

    var $temp = $('<div />',{html: column_content});

    //process headers
    $temp.find(':header').wrapInner('<b />').contents().unwrap();

    $temp.find('*:not(p, b)').contents().unwrap();

    $('#html').html($temp.html());
    $('#text').text($temp.html());
});

演示： 小提琴

Answer 2

这应该使您开始：

var column_content =
    '<h1>Test 1</h1>\n' +
    '<p>Lorem Ipsum</p>\n' +
    '<h2>Test 2</h2>\n' +
    '<input type="button" onclick="alert(&quot;missed me&quot;)" value="Click">\n' +
    '<a href="javascript://">keep this</a>\n' +
    '<h3>Test 3</h3>\n' +
    'unwrapped text';

var $temp = $("<div></div>").html(column_content);

$temp.find("h1, h2, h3").each(function () {
    $(this).wrapInner("<b></b>").children().insertAfter(this);
});
$temp.find(":not(b, p)").each(function () {
    $(this).contents().insertAfter(this);
    $(this).remove();
});
console.log($temp.html());
/*
<b>Test 1</b>
<p>Lorem Ipsum</p>
<b>Test 2</b>

keep this
<b>Test 3</b>
unwrapped text
*/