背景

前几天在需求评审的时候，产品问我能不能把输入框也做成富文本那样，在输入一些敏感词、禁用词的时候，给它标红。我听完心里一颤，心想：好家伙，又来给我整活。本着能砍就砍的求生法则，我和产品说：输入框输入的文字都会被转成字符串，这没办法去标红呀！产品很硬气的回到：没办法，这是老板提的需求，你下去研究研究吧。行吧，老板发话说啥也没用，开干吧！

实现思路

实现标红就需要给文字加上html标签和样式，但是输入框会将html都转为字符串，既然输入框无法实现，那么我们换一种思路，通过div代替输入框来显示输入的文本，那我们是不是就可以实现文本标红了？话不多说，直接上代码（文章结尾会附上demo）：

<div class="main">
<div id="shadowInput" class="highlight-shadow-input"></div>
<textarea
id="textarea"
cols="30"
rows="10"
class="highlight-input"

    ></textarea>
</div>

.main {
position: relative;

  }
.highlight-shadow-input {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 8px;
border: 1px;
box-sizing: border-box;
font-size: 12px;
font-family: monospace;
overflow-y: auto;
word-break: break-all;
white-space: pre-wrap;

}
.highlight-input {
position: relative;
width: 100%;
padding: 8px;
box-sizing: border-box;
font-size: 12px;
background: rgba(0, 0, 0, 0);

    -webkit-text-fill-color: transparent;
z-index: 999;
word-break: break-all;

}

实现这个功能的精髓就在于将输入框的背景和输入的文字设置为透明，然后将其层级设置在div之上，这样用户既可以在输入框中输入，而输入的文字又不会展示出来，然后将输入的文本处理后渲染到div上。

const textarea = document.getElementById("textarea");
const shadowInput = document.getElementById("shadowInput");
const sensitive = ["敏感词", "禁用词"];

textarea.oninput = (e) => {
let value = e.target.value;

    sensitive.forEach((word) => {

      value = value.replaceAll(

        word,
`<span style="color:#e52e2e">${word}</span>`

      ).replaceAll("\n", "<br>");;

    });

    shadowInput.innerHTML = value;

};

监听输入框oninput事件，用replaceAll匹配到敏感词并转为html后渲染到shadowInput上。此外，我们还需要对输入框的滚动进行监听，因为shadowInput是固定高度的，如果用户输入的文本出现滚动条，则需要让shadowInput也滚动到对应的位置

<div><div id="shadowInput" class="highlight-shadow-input"></div></div>

textarea.onscroll = (e) => {

    shadowInput.scrollTop = e.target.scrollTop;

};
// 此处输入时也需要同步是因为输入触底换行时，div的高度不会自动滚动

textarea.onkeydown = (e) => {

    shadowInput.scrollTop = e.target.scrollTop;

};

最终实现效果：

至此一个简单的文本输入框实现文字高亮的功能就完成了，上述代码只是简单示例，在实际业务场景中还需要考虑xss注入、特殊字符处理、特殊字符高亮等等复杂问题。

总结

这篇文章主要给遇到有类似业务需求的同学一个参考，以及激发大家的灵感，用这种方法是不是还可以实现一些简单的富文本功能呢？例如文字加删除线、文字斜体加粗等等。有想法或有问题的小伙伴可以在评论区留言一起探讨哦！

demo