如何通過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>