如何在没有标签的地方添加标签?

时间:2017-05-16 12:39:50

标签: javascript jquery html css

如果我有这个HTML代码,例如:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat.

如何为每个没有任何标签的文字添加标记<p></p>,例如这个没有标记的lorem ipsum文本?

2 个答案:

答案 0 :(得分:0)

您可以为段落使用数组,并为每个段落构建一个新节点。然后附加到document.body

var text = ['Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'];

text.forEach(function (t) {
    var p = document.createElement('p');
    p.appendChild(document.createTextNode(t));
    document.body.appendChild(p);
});

答案 1 :(得分:0)

假设您的全文/嘴唇包含在某些div或其他html标记中:

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

你可以找到段落,用新行分开,然后用周围的p标签重新插入。

const element = $('.text')
const content = element.html()
const lines = content.split('\n')
const paragraphs = lines.filter(x => x)
const html = paragraphs.map(x => '<p>' + x + '</p>').join()
element.html(html)

如果您不熟悉胖箭(x =&gt; ...)请告诉我,我会将其更改为JS5

https://jsfiddle.net/wtLs7ef6/2/