将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>