将 p 标签添加到无格式文本 - 纯 JavaScript

Question

I have a content which inner elements text doesn't wrap with any html tags. How can I add a “p” tag using plain JavaScript? jQuery solution is already existed but I need plain JavaScript solution. I've already tried with “nodeType” , “innerText” , “textContent” and “innerHTML” .

jQuery solution is

$('.arfaa').each(function() { 
$(this).contents().filter(function() {
return this.nodeType === 3;  
}).wrap('<p></p>');
});

How to figure this out by plain JavaScript?

<div class="content">

This is just a line of text.

<div><img src="demo.jpg" alt=""></div>

This is just a line of text.

<br><br>

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<br><br>

This is just a <a href="#">line</a> of text.

<br><br>    

This is just a <span>line of text</span>.

<br><br>

<figure><img src="demo.jpg" alt="text">
<figcaption>img description</figcaption>
</figure>

This is just a line of text.

<br><br>

This is just a line of text.

<table><tbody>
<tr><th>A</th><td>A value</td></tr>
<tr><th>B</th><td>B value</td></tr></tbody>
</table>

<br><br>

This is just a line of text.

</div>

Expected output

<div class="content">

<p>This is just a line of text.</p>

<div><img src="demo.jpg" alt=""></div>

<p>This is just a line of text.</p>

<br><br>

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<br><br>

<p>This is just a <a href="#">line</a> of text.</p>

<br><br>    

<p>This is just a <span>line of text</span>.</p>

<br><br>

<figure><img src="demo.jpg" alt="text">
<figcaption>img description</figcaption>
</figure>

<p>This is just a line of text.</p>

<br><br>

<p>This is just a line of text.</p>

<table><tbody>
<tr><th>A</th><td>A value</td></tr>
<tr><th>B</th><td>B value</td></tr></tbody>
</table>

<br><br>

<p>This is just a line of text.</p>

</div>

Answer 1

This is one way to do it in pure javascript. Use the findTextNodesFlat to replace the Each function. If you want to get all texts nodes (independent of its depth), use the findTextNodesTree instead. Then wrap the textnodes using the wrapTextNodes function.

// walks the child elements of a dom element and saves textnodes to the textNodes array
var findTextNodesFlat = function (node, textNodes) {
    node = node.firstChild;
    while(node) {
        if (node.nodeType == Node.TEXT_NODE)
            textNodes.push(node);

        node = node.nextSibling;
    }
};

// walks the dom element recursively and saves textnodes to the textNodes array
var findTextNodesTree = function (node, textNodes) {
    if (node.nodeType == Node.TEXT_NODE)
        textNodes.push(node);

    node = node.firstChild;
    while(node) {
        findTextNodes(node, textNodes);
        node = node.nextSibling;
    }
};

// wraps the textNodes elements with <p></p>
var wrapTextNodes = function (textNodes) {
    for(let node of textNodes) {
        let parentNode = node.parentNode;
        let wrapper = document.createElement('p');
        parentNode.insertBefore(wrapper, node);
        wrapper.appendChild(node);
    }
};

var textNodes = [];
findTextNodesFlat(document.getElementsByClassName("content")[0], textNodes);
wrapTextNodes(textNodes);