用HTML br 替換↵ 換行前先想一想 | 換行符號html
這篇算是一個隨手紀錄,不要輕易用
替換換行↵,先想想有沒有其他的方式。起因前陣子在處理前人的Legacycode,有個情境是使用者在後台頁面輸入文章,前端把其show在前台頁面上。當然後端會在需顯示的前台頁面API將其(字串)發過來,這個字串不包含HTML標籤,可能包含換行符號,為了處理這個狀況,前人寫了個共用function來將換行符號替換成HTML
標籤,例如:constsetTextLineFeed=text=>text.replace(//g,
);將後端傳來包含換行符號的字串,先丟進這個function處理過,好像很合理。現在處理過的字串多...
這篇算是一個隨手紀錄,不要輕易用 <br/> 替換換行 ↵,先想想有沒有其他的方式。
起因前陣子在處理前人的 Legacy code,有個情境是使用者在後台頁面輸入文章,前端把其 show 在前台頁面上。當然後端會在需顯示的前台頁面 API 將其(字串)發過來,這個字串不包含 HTML 標籤,可能包含換行符號,為了處理這個狀況,前人寫了個共用 function 來將換行符號替換成 HTML <br/> 標籤,例如:
const setTextLineFeed = text => text.replace(/ /g,<br/>);將後端傳來包含換行符號的字串,先丟進這個 function 處理過,好像很合理。
現在處理過的字串多了 HTML 標籤 <br>,前端開發是用 React,為了解決字串多了 <br> 標籤並達成換行,原本顯示文字的地方就用了 dangerouslySetInnerHTML
這樣寫有什麼問題?其實 <br/> 本身沒什麼問題,有問題是上面這個思路。
replace <br/>後端 API 發來的 response 參數可能是這樣
text: "早安↵您好"預期網頁上看到
早安 您好而不是
早安↵您好 // or 早安 您好text 值本來不包含 HTML Tag,為了要處理 ↵ ,才用上了自己寫的 setTextLineFeed 去 replace,只不過 replace 後的 text 變成
"早安<br/>您好"顯示方面就必須這樣寫
<p dangerouslySetInnerHTML={{ __html: setTextLineFeed(text) }} /> dangerouslySetInnerHTML看看官方文件[1]說明
dangerouslySetInnerHTML 是 React 用來替代 DOM 的 innerHTML。普遍來說,從程式碼中注入 HTML 是個冒險的行為,你會很輕易地讓使用者暴露在 cross-site...