將Enter作為新行從textarea標記轉換為div標記

Question

舍瑪

當用戶在<div>標簽中按enter鍵作為<br>標簽時如何轉換新行？

這是代碼：

<textarea>
    First text here //user press enter here 
    Second text here
</textarea>  

//AJAX to insert text to Database here... 

MySQL過程

//AJAX repond here... 

document.getElementById('sample').innerHTML = this.responseText;

<div>標記內的結果

<div id='sample'>
    First text here <br/>
    Second text here
</div>

Answer 1

在php中使用nl2br函數：

$text = nl2br($POST['text_field']);

在javascript中：

function nl2br (str, is_xhtml) {   
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';    
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

Answer 2

您可以使用replace()將enter（ \\n ）替換為<br>

堆棧片段

 var text = document.getElementById("text"); var result = document.getElementById("result"); text.addEventListener("keyup", function(e) { result.innerHTML = text.value.replace(/\\n/g, "<br />"); }); 

 <textarea id="text"></textarea> <div id="result"></div>