Добавить тег p к неформатированному тексту - Обычный JavaScript - PullRequest
Новая
       15

Добавить тег p к неформатированному тексту - Обычный JavaScript

0 голосов
/ 01 марта 2020

У меня есть содержимое, текст которого не оборачивается никакими тегами html. Как я могу добавить тег «p», используя обычный JavaScript? jQuery решение уже существует, но мне нужно простое JavaScript решение. Я уже пробовал с «nodeType» , «innerText» , «textContent» и «innerHTML» .

jQuery решение - это 

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

Как это понять простым 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>

Ожидаемый результат 

<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 Ответ

1 голос
/ 01 марта 2020

Это один из способов сделать это в чистом виде javascript. Используйте findTextNodesFlat, чтобы заменить функцию Each. Если вы хотите получить все текстовые узлы (независимо от их глубины), используйте взамен findTextNodesTree. Затем оберните текстовые узлы с помощью функции wrapTextNodes. 

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