如何通过html标签在textarea中换行？

Question

我想在文lorem ipsum用<p>lorem ipsum</p>替换每个lorem ipsum 。

因此，每一行都应由<p>...</p>换行。

我在Google上搜索以查找可以尝试的代码-但未成功。

有什么帮助吗？

 $('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>标记中，然后将值设置回textarea。

 $('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> 

Answer 2

使用简单的正则表达式replace 。

 $('button').on('click', function() { $(".txa").html($(".txa").html().replace(/(lorem ipsum)/g, "<p>$1</p>")); }); 

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

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <textarea class='txa'> lorem ipsum lorem ipsum lorem ipsum </textarea> <br> <button>CLICK</button> 

如果实际结果是<p></p>每一行：

 $('button').on('click', function() { $(".txa").html($(".txa").html().split("\\n").map(e => `<p>${e}</p>`).join("\\n")); }); 

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

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <textarea class='txa'> lorem ipsum lorem ipsum lorem ipsum</textarea> <br> <button>CLICK</button> 

Answer 3

您可以使用正则表达式捕获每行

// capture everything up to a newline
/(.*[^\n])/g

 $('button').on('click', function(){ $(".txa").val($(".txa").val().replace(/(.*[^\\n])/g, "<p>$1</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 bla bla Hello world lorem ipsum </textarea> <br> <button>CLICK</button> 

Answer 4

因此，尝试了另一种方法来解决不良行为，即如果页面加载后键入或带有“ p”标记的复制问题，行不会更新。

如果该行没有现有的“ p”标签，则只会更新该行。 如果这样做，将先删除它们，然后替换字符串，这样就不会有重复的标签

希望你喜欢。

 function insertLine() { var lines = $('textarea').val().split('\\n'); var newLines = ''; for (var i = 0; i < lines.length; i++) { if (lines[i] !== "" && !lines[i].includes('<p>')) { newLines += '<p>' + lines[i] + '</p>'; newLines += '\\n'; } else if (lines[i] !== "") { lines[i] = lines[i].replace('<p>', ''); lines[i] = lines[i].replace('</p>', ''); lines[i] = lines[i].replace(/(.*[^\\n])/g, '<p>' + lines[i] + '</p>'); newLines += lines[i]; newLines += '\\n'; } } $('.txa').val(newLines); } 

 .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"> text 1 text 2 text 3 Type a few lines of your own. </textarea> </br> <button onclick="insertLine();">RUN</button>