從textarea複製到div，保留換行符

Question

我有<textarea>和<div>（其中<p>裏面）。 當在該區域中輸入文本時，<p>會在keyUp時使用內容進行更新。

有沒有辦法從textarea保留換行符（新行），並以某種方式讓它們像div/p中的換行符一樣工作？

用</p><p>取代雙「新線」，這是否也可能？這幾乎是一個偉大的工作，但不希望爲此，這是一個非常小的項目。

---

這就是我到目前爲止。

$(".box textarea").keyup(function() { 
    var value = $(this).val(); 
    $('.box p').text(value); 
}); 

Answer 1

您可以簡單地這樣做：

$('.box textarea').keyup(function() { 
    var value = $(this).val().replace(/\n/g, '<br/>'); 
    $(".box p").html(value); 
}); 

這將替換所有行的textarea元件切斷\n與HTML <br/>標籤全部更換，這樣就可以保持在換行符你的textarea裏面還有<p>標籤元素。

簡單的演示在這裏：

$('.box textarea').keyup(function() { 
 
    $(".box p").html(this.value.replace(/\n/g, '<br/>')); 
 
});

textarea,p { 
 
    width: 90%; 
 
    height: 80px; 
 
} 
 
p { 
 
    border: 1px solid #eee; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <textarea></textarea> 
 
    <br/> 
 
    <p></p> 
 
</div>

如果你可以改變你的CSS文件，那麼你也可以嘗試以下解決方案通過@Explosion丸的建議。即使你將不得不在這裏仍然使用jQuery代碼到textarea輸入的文本添加到p標籤上keyup事件，如：

$('.box textarea').keyup(function() { 
 
    $(".box p").html(this.value); // replace is not needed here 
 
});

textarea,p { 
 
    width: 90%; 
 
    height: 80px; 
 
} 
 
p { 
 
    border: 1px solid #eee; 
 
    padding: 5px; 
 
    white-space: pre; // <--- This is the important part 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <textarea></textarea> 
 
    <br/> 
 
    <p></p> 
 
</div>

Answer 2

你可能要添加的CSS規則white-space: pre或white-space: pre-wrap到.box p。這將顯示空白。

Answer 3

使用string.replace("\n", "<br/>")將文本區域中的換行符替換爲頁面中的新行。

的JavaScript：

<script type="text/javascript"> 
function ta() 
{ 
taValue = document.getElementById("ta").value; 
taValue = taValue.replace("\n", "<br/>"); 
document.getElementById("tatext").innerHTML = taValue; 
} 
</script> 

HTML：

<textarea id="ta" onkeyup="ta()"></textarea> 
<div id="tatext"></div> 

Answer 4

這是最簡單，最安全的純jQuery的解決方案：

$(".box textarea").keyup(function() { 
    var value = $(this).val(); 
    $('.box p').text(value).css('white-space', 'pre-wrap'); 
}); 

當然，如果你可以添加.box p { white-space: pre-wrap }到你的靜態CSS樣式，那麼你不需要用jQuery注入它。

（還請注意，white-space: pre-wrap也會導致保留多個連續空格，而不是摺疊到一個空格中。如果你不希望出現這種情況，但仍然希望保留換行符，使用white-space: pre-line代替。）

---

詩篇。你應該從來沒有通過未轉義的用戶輸入到.html()（如目前接受的答案），因爲如果輸入包含任何HTML元字符如&或<，並且還可以打開HTML注入和交叉如果輸入可能會受到惡意攻擊者的影響，則可以使用本地腳本（XSS）攻擊。

如果您絕對堅持不使用任何形式的CSS white-space屬性，那麼在將<br>標籤添加到其中之前，您需要首先轉義輸入中的任何HTML元字符。可能最簡單和最安全的方法就是讓瀏覽器爲你逃脫，例如，像這樣：

$(".box textarea").keyup(function() { 
    var value = $(this).val(); 
    $('.box div.output').text(value).html(function (index, html) { 
    return '<p>' + html.replace(/[^\S\n]+\n/g, '\n').replace(/\n\n+/g, '</p><p>').replace(/\n/g, '<br>') + '</p>'; 
    }); 
}); 

這將第一輸入文本使用.text()（自動HTML-逸出它），然後修改生成的HTML代碼，以除去從線尾隨空格複製到目標元件，塌陷多個連續換行進入段落分隔符，最後用<br>標籤替換單個換行符。 （請注意，爲了允許輸出中有多個段落，目標元素應該是<div>，而不是<p>元素。將一個<p>元素嵌套在另一個元素中不是有效的HTML，並且可能不會生成一致的結果不同的瀏覽器。）