若依 ruoyi-vue SpringBoot highlight-textarea 输入框敏感词关键词高亮标红（二）

参考文章，非常感谢大佬的分享
实现可高亮的输入框 — HighlightTextarea
GitHub:highlight-textarea

可看作者上一篇文章
若依 ruoyi-vue SpringBoot聊天敏感词过滤sensitive-word（一）

效果图

审核时，输入框高亮敏感词，并且能编辑

前端代码

列表高亮

      <el-table-column
        label="标题"
        align="center"
        prop="publishTitle"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-html="highlightPublishTitle(scope.row)"></span>
        </template>
      </el-table-column>

    highlightPublishTitle(row){
   
      let text = row.publishTitle
      for (const word of row.titleSensitiveWord) {
   
        const regex = new RegExp(word, 'g')
        text = text.replace(regex, `<span style="color: red;">${
     word}</span>`)
      }
      return text
    },

编辑表单输入框高亮

        <el-form-item label="标题" prop="publishTitle">
          <highlight-textarea
            v-if="open"
            style="width: 100%;"
            placeholder="请输入"
            :text="form.publishTitle"
            type="input"
            @change="(value) => {
              form.publishTitle = value
            }"
            :highlightKey="form.titleSensitiveWord">
          </highlight-textarea>
        </el-form-item>

引用组件

import HighlightTextarea from '@/components/HighlightTextarea/index.vue';

components: {
    HighlightTextarea },

npm安装

npm install less@^4.2.0 less-loader@^7.3.0

组件

<template>
  <div class="highlight-box">
    <template v-if="type === 'textarea'">
      <div v-if="value"
           class="textarea-outer"
           ref="textareaOuter"
           :style="{'height': `${maxHeight}px`}">
        <div ref="outerInner" class="outer-inner"
             v-html="highlightHtml(value)">
        </div>
      </div>
      <textarea
        ref="textareaBox"
        :style="{'height': `${maxHeight}px`}"
        :placeholder="placeholder"
        @keyup.enter="syncScrollTop"
        v-model.trim="value">
            </textarea>
    </template>