Как заменить тег HTML строки на другой тег?

Question

Как заменить заменяющий тег HTML не-whitelist тегом P?

Пример Белый список pbr тег

Строка Перед

<p>hello</p> 
<div class="test">hello world <br> 
    <div>First LI</div> 
    <div>Second LI <a href="">link</a></div> 
</div> 
<div class="fw"> 
    <p>shareeditflag <span>test</span></p> 
</div> 
<table> 
    <tbody> 
    </tbody> 
</table> 

Строка Ожидать

<p>hello</p> 
<p class="test">hello world <br> 
    <p>First LI</p> 
    <p>Second LI <a href="">link</a></p> 
</p> 
<p class="fw"> 
    <p>shareeditflag <p>test</p></p> 
</p> 
<p> 
    <p> 
    </p> 
</p> 

В Jquery образом это не может быть сделано, потому что, когда глубокий узел имеет проблема в ней требует цикла пока у вас не будет белого списка?

$('*:not(p,br)').replaceWith($('<p>' + this.innerHTML + '</p>')); 

Answer 1

Следуя стратегии изложены here, вы можете создать новый <p> элемент, наполнить его содержимым ваших старых <div> с, вставить новый элемент, а затем удалите оригиналы:

var test = document.getElementsByClassName("test")[0]; 
    var fw = document.getElementsByClassName("fw")[0]; 

    var ptest = document.createElement("p"); 
    ptest.innerHTML = test.cloneNode(true).innerHTML; 
    parent = test.parentNode; 
    parent.insertBefore(ptest, test); 
    parent.removeChild(test); 

    var pfw = document.createElement("p"); 
    pfw.innerHTML = fw.cloneNode(true).innerHTML; 
    parent = fw.parentNode; 
    parent.insertBefore(pfw, fw); 
    parent.removeChild(fw); 

Однако сначала вам придется исправить проблемы со своим HTML, потому что ни один из этих методов не может рассчитывать на работу с искаженным HTML. В этом случае поместите <li> s в список и поместите содержимое <table> в <tbody> (или в строку и столбец таблицы). Например:

<p>hello</p> 

<div class="test"> 
    hello world 
    <br> 
    <ul> 
    <li>First LI</li> 
    <li>Second LI <a href="">link</a></li> 
    </ul> 
</div> 

<table id="fw" class="fw"> 
    <tr> 
    <td> 
    <p>shareeditflag</p> 
    </td> 
    </tr> 
</table>