用另一个标签替换html标签，然后删除其他标签

Question

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

如何更换所有标题<h1><h2><h3>等。与<b>标签，然后删除自<b>是不同的，<p>

用户输入被存储在一个变量这样所有标签：

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

Answer 1

这应该让你开始：

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 
*/ 

Answer 2

尝试

$('.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()); 
}); 

演示：Fiddle