将p标记添加到未格式化的纯文本JavaScript

我有一个内容，它的内部元素文本没有任何html标记。如何使用普通JavaScript添加“p”标记？jQuery解决方案已经存在，但我需要简单的JavaScript解决方案。我已经尝试了“nodeType”、“innerText”、“textContent”和“innerHTML”

jQuery解决方案是

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

$（'.arfaa'）。每个（函数（）{
$（this.contents（）.filter（function（））{
返回this.nodeType==3；
}).wrap（“
”）；
});

如何通过普通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>

这只是一行文字。
这只是一行文字。




清单项目1
清单项目2
清单项目3




这只是一段文字。



这只是一行文字。



img描述
这只是一行文字。



这只是一行文字。
AA值
BB值



这只是一行文字。

预期产出

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

这只是一行文字

这只是一行文字





清单项目1
清单项目2
清单项目3




这只是一段文字




这只是一行文字




img描述
这只是一行文字




这只是一行文字

AA值
BB值



这只是一行文字

这是在纯javascript中实现的一种方法。使用findTextNodesFlat替换每个函数。如果要获取所有文本节点（与深度无关），请改用FindTextNodeStore。然后使用wrapTextNodes函数包装textnodes

// 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);

//遍历dom元素的子元素并将textnodes保存到textnodes数组中
var findTextNodesFlat=函数（节点，textNodes）{
node=node.firstChild；
while（节点）{
if（node.nodeType==node.TEXT\u节点）
textNodes.push（节点）；
node=node.nextSibling；
}
};
//递归遍历dom元素并将textnodes保存到textnodes数组
var findTextNodesTree=函数（节点，textNodes）{
if（node.nodeType==node.TEXT\u节点）
textNodes.push（节点）；
node=node.firstChild；
while（节点）{
findTextNodes（节点，textNodes）；
node=node.nextSibling；
}
};
//用

var wrapTextNodes=函数（textNodes）{
for（文本节点中的let节点）{
让parentNode=node.parentNode；
让wrapper=document.createElement（'p'）；
insertBefore（包装器，节点）；
appendChild（节点）；
}
};
var textNodes=[]；
findTextNodesFlat（document.getElementsByClassName（“内容”）[0]，textNodes）；
wrapTextNodes（textNodes）；

感谢您的回答。但我希望只包装未包装的文本。但这也会将文本包装到元素中。修改示例以使用findTextNodesFlat函数精确模拟each函数。将findTextNodes重命名为FindTextNodeStore。感谢您宝贵的时间和回复。这真的很有趣。在DOM中，有空的“p”标记。如果我通过“.textContent.replace（/[\n\r]+|[\s]{2，}/g，”）.trim（）.length==0”操作空标记，仍然缺少一些内容。“这只是一段文字”被操纵成这只是一段

文字。干净的HTML应该是这只是一个文本集

。我将jquery解决方案的结果与我的结果进行了比较，结果完全相同。所以我想你应该在你的问题中包括这一点。