Question

I want to convert Pre to html below is my pre tag

<pre>
   Point1
   Point2
   Point3
</pre>

I am expecting output in html in ul li format like below

Point1
Point2
Point3

Answer 1

1）抓住<pre>元素的textContent

，然后链接以下方法：

2）trim周围空间

3）split针对行返回

4）在该数组上map，并返回一个列表项数组（使用template literal），最后

5）join变成一个字符串。

然后只需将HTML字符串添加到DOM（insertAdjacentHTML）

const pre = document.querySelector('pre');
const items = pre.textContent.trim().split(/\n/).map(el => `<li>${el}</li>`).join('');
document.body.insertAdjacentHTML('beforeend', `<ul>${items}</ul>`);

<pre>
   Point1
   Point2
   Point3
</pre>

Answer 2

您可以获得<ul>文本内容，并按<li>（换行符）进行分割...
然后创建如下的$(document).ready(function(){ var text = $("pre").text(); var lines = text.split("\n"); var ul = $("<ul>"); for(i=0;i<lines.length;i++){ if(lines[i]!=""){ var li = $("<li>").text(lines[i]); ul.append(li); } } $("pre").remove(); $("body").append(ul); }); / <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <pre> Point1 Point2 Point3 </pre>结构：

body

(?<=\\D)(?=\\d

因此，一旦有了文本数组，只需遍历它即可创建列表元素并将其附加到)或任何其他容器中。

如何转换<pre> tag to HTML using JavaScript or jQuery

2 个答案: