前言：最近產(chǎn)品提出一個新需求，要文本框的字體部分改變顏色、大小、換行等功能。在了解需求后，文本框input發(fā)現(xiàn)完全滿足不了現(xiàn)需求，于是尋求其它解決方案。

給定字符串

    let text = '這是一段正常的文字\r\n這是換行（<font color="red">這是提示的紅色</font>）\r\n這段文字為可編輯狀態(tài)'

要實現(xiàn)的效果

方案一

• 當(dāng)發(fā)現(xiàn)文本框滿足不了需求時，我第一感覺時不想麻煩，雖然把每一段內(nèi)容拆成單獨的input標(biāo)簽也可實現(xiàn)但是工作量太大，太過麻煩。我的思路是利用盒子的屬性contenteditable直接將內(nèi)容丟進(jìn)div。

<div contenteditable="true" id="text">
</div>

<script>
let text = '這是一段正常的文字\r\n這是換行（<font color="red">這是提示的紅色</font>）\r\n這段文字為可編輯狀態(tài)';
let dom = document.getElementById('text');
dom.innerHTML= text;
// 當(dāng)編輯完成后 在取得div的內(nèi)容就可以了
let resultText = document.getElementById('text').innerHTML;
console.log(resultText);
</script>

但是這樣有一點滿足不了，text文本中的\r\n識別不了

最終方案

• 既然div識別不了\r\n那就換個能識別的標(biāo)簽，完美解決。

<pre contenteditable="true" id="text">
</pre>

<script>
let text = '這是一段正常的文字\r\n這是換行（<font color="red">這是提示的紅色</font>）\r\n這段文字為可編輯狀態(tài)';
let dom = document.getElementById('text');
dom.innerHTML= text;
// 當(dāng)編輯完成后 在取得div的內(nèi)容就可以了
let resultText = document.getElementById('text').innerHTML;
console.log(resultText);
</script>

效果如下

完成任務(wù)~
如果有其它最優(yōu)解，歡迎留言指教。