首頁 > web前端 > html教學 > 如何處理html中的換行字元'↵”

如何處理html中的換行字元'↵”

醉折花枝作酒筹
發布: 2021-04-25 09:26:03
轉載
3237 人瀏覽過

本篇文章介紹處理html中的換行字元「↵」的方式。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

如何處理html中的換行字元'↵”

需求背景

透過ajax請求回欄位值,字元是String類型,包含換行符號 ,將取得到的字串內容按照原樣格式進行換行展示出來。

解決想法

透過字串替換元素的方式解決問題

解決過程

[danger] 錯誤過程:想到透過字串替換元素的方式,在首次嘗試過程中始終採用以<br> 標籤去替換字符,替換失敗。

正確解決方式

var myString = myString.replace(/(\r\n|\n|\r)/gm, "<br />");
登入後複製

[info] 不是透過去替換,而是在html中會被辨識為\r,\ n等轉義字符,所以需要使用\r\n去替換。

測試實例

<body>
	<p id="app"></p>
	<p id="app2"></p>
	<script type="text/javascript">
		var  msg = `你好
		换行符
		这是一个非常有意思的替换`;
		var msg2 = msg.replace(/(\r\n|\n|\r)/gm , "<br />");
		document.getElementById("app").innerHTML = msg;
		document.getElementById("app2").innerHTML = msg2;
		console.log(msg)
		console.log(msg2 )
	</script>
</body>
登入後複製

顯示結果<br>如何處理html中的換行字元↵”

#重點說明:一定要透過鍵盤打上去的換行↵,而不是為了測試效果輸入上去的↵字元。

推薦學習:html影片教學

以上是如何處理html中的換行字元'↵”的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板