javascript - 如何通过 html 标签将每一行换行到文本区域内？

Question

我想替换每个 lorem ipsum与 <p>lorem ipsum</p>在文本区域内。

所以每一行应该用 <p>...</p> 包裹起来.

我正在谷歌上搜索我可以尝试的代码 - 但没有成功。

有什么帮助吗？

$('button').on('click', function(){
  // add <p> and </p>
});

.txa{
display:block;
width:100%;
resize:none;
height:30vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea class='txa'>
lorem ipsum
lorem ipsum
lorem ipsum
</textarea>
<br>
<button>CLICK</button>

Answer 1

您可以使用 map 的组合和join要将文本分开，请将其包装在 <p></p> 中标签并将值设置回文本区域。

$('button').on('click', function(){
  var text = $('.txa').val();
  var result = text.split("\n")
                   .filter(x => x.length > 0)
                   .map(t => `<p>${t}</p>`)
                   .join("\n");
  $('.txa').val(result)
});

.txa{
display:block;
width:100%;
resize:none;
height:30vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea class='txa'>
lorem ipsum
lorem ipsum
lorem ipsum
</textarea>
<br>
<button>CLICK</button>