在textarea中输入文本关键字标红，在原有的方案上做了改动，使用了el-input是为了添加一些按键功能 ，原有方案支持input 和 textarea两种类型，有用请采纳。
若依 ruoyi-vue SpringBoot highlight-textarea 输入框敏感词关键词高亮标红（二）_ruoyi textarea-CSDN博客
<template><div class="highlight-box"><div v-if="value" class="textarea-outer" ref="textareaOuter"><div ref="outerInner" class="outer-inner" v-html="highlightHtml(value)"></div></div><el-inputclass="item__input"ref="textareaBox"type="textarea":placeholder="placeholder":autosize="{ minRows: 2 }"v-model.trim="value"@keyup.enter.native="syncScrollTop"@scroll.native="syncScrollTop"></el-input></div>
</template><script>
export default {name: "HighlightTextarea",data() {return {value: ""}},props: {placeholder: {type: String,required: false,default: "请输入"},text: {type: String,required: false,default: ""},highlightKey: {type: Array,require: false,default: () => []},type: {type: String,required: false,default: "textarea"}},created() {this.value = this.text.replace(/(^\s*)|(\s*$)/g, "").replace(/<br \/>|<br\/>|<br>/g, "\n")},mounted() {this.scrollMousewheel()},computed: {},watch: {value(newValue) {this.$emit("change", newValue)}},methods: {highlightHtml(str) {if (!str || !this.highlightKey?.length) return strconst escapeRegExp = string => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")return this.highlightKey.reduce((acc, keyword) => {const regex = new RegExp(escapeRegExp(keyword), "g")return acc.replace(regex, '<span class="highlight">$&</span>')}, str)},syncScrollTop(event) {if (event) {event.preventDefault()event.stopPropagation()}this.$nextTick(() => {const input = this.$refs.textareaBox?.$el?.querySelector("textarea")const highlightDiv = this.$refs.outerInnerif (input && highlightDiv) {highlightDiv.scrollTop = input.scrollTophighlightDiv.scrollLeft = input.scrollLeft}})},scrollMousewheel() {if (this.type === "input") {return}},// 处理字符串中可能对正则有影响的字符escapeString(value) {const characterss = ["(", ")", "[", "]", "{", "}", "^", "$", "|", "?", "*", "+", "."]let str = value.replace(new RegExp("\\\\", "g"), "\\\\")characterss.forEach(function (characters) {let r = new RegExp("\\" + characters, "g")str = str.replace(r, "\\" + characters)})return str}},destroyed() {}
}
</script><style lang="scss">
$width: 100%;
.highlight-box {width: 100%;height: 100%;font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;position: relative;display: flex;font-size: 12px;width: $width;position: relative;color: #333333;background: #ffffff;// border-radius: 5px;overflow: hidden;.textarea-outer,.input-outer {box-sizing: border-box;width: $width;position: absolute;top: 0;left: 0;right: 0;border: 1px solid transparent;border-top: 0;// 鼠标事件失效 ie6-10不支持pointer-events: none;cursor: text;text-align: left;span {color: #f27c49;}&:hover {border-color: #4c84ff;}}.textarea-outer {overflow-y: auto;line-height: 20px;word-break: break-all;.outer-inner {padding: 5px 8px;width: 100%;box-sizing: border-box;}}textarea {line-height: 20px;resize: none;text-align: start;word-break: break-all;}.input-outer,input {width: $width;height: 28px;line-height: 28px;}.input-outer {bottom: 0;padding: 0 8px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}textarea,input {font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;font-size: 12px;color: #333333;text-shadow: 0 0 0 rgba(0, 0, 0, 0);-webkit-text-fill-color: transparent;background: transparent;line-height: 20px;border-radius: 5px;border: 1px solid #e0e0e0;padding: 4px 8px;box-sizing: border-box;width: 100%;outline: none;&::placeholder {-webkit-text-fill-color: #999999;}&:hover {border-color: #4c84ff;}&:focus {border-color: #4c84ff;box-shadow: 0 0 0 2px #dbe4ff;outline: none;}}
}
</style>
