使用 p 标签将 textarea 值转换为 html 内容

Question

需要使用p标签而不是换行将 textarea 值转换为 html 内容
这是我的方式 - 它有效 - 但也许有更原生的方式或预定义的功能来做同样的事情

 $('button').on('click', function(){ let a = $('#tx').val(); let html = '<p>' + a.trim().replace('\\n', '</p>\\n<p>') + '</p>'; console.log(html); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id='tx'> lorem ipsum </textarea> <button>CLICK</button>

Answer 1

在 JavaScript 中，您可以按换行符拆分并获取数组。 您可以使用模板插值来映射它以环绕标签。 使用正则表达式/\\n+/将忽略多个后续的换行符。

const text = "Hello\nWorld!\n\nHello\nmy\nfriend";
const html = text.split(/\n+/).map(e => `<p>${e}</p>\n`);

还有一个console.log(html); 看起来像这样：

(5) ["<p>Hello</p>↵", "<p>World!</p>↵", "<p>Hello</p>↵", "<p>my</p>↵", "<p>friend</p>↵"]