简单的 HTML 过滤拼接问题

Question

现在有一个 HTML

<p>
    "ab"
    <img style="xxx" xxxx src="xxx">
    "cd"
    <img src="xxx" style="xxx" xxx>
    "ef"
</p>

里面的文本“ab”、“cd”、“ef”并没有被 p 标签或者 span 标签包裹

请问我该怎么将文本分别抽离出来变成如下的形式？

原生 js 或者使用 jQuery 均可

<p>
    <p>ab</p>
    <img style="xxx" xxxx src="xxx">
    <p>cd</p>
    <img src="xxx" style="xxx" xxx>
    <p>ef</p>
</p>

Answer 1

原生js

// parent 就是外层p元素
let parent = document.getElementById('xxx')
let list = Array.prototype.slice.call(parent.childNodes)
list.forEach(function(item){
    console.log(item, item.nodeType)
    if(item.nodeType == 3){
        let newdom = document.createElement('p')
        newdom.innerHTML = item.nodeValue
        parent.replaceChild(newdom, item)
    }
})

jq

// parent 就是外层p元素
let $parent = $('#xxx')
let list = Array.prototype.slice.call($parent.contents())
list.forEach(function(item){
    console.log(item, item.nodeType)
    if(item.nodeType == 3){
        $(item).wrap('<p></p>')
    }
})