当前位置：首页 > article >正文

前端vue+el-input实现输入框中文字高亮标红效果（学习自掘金博主文章）

article 2025/1/4 6:02:10

学习自掘金文章https://juejin.cn/post/7295169886177918985

该博主的代码基于原生textarea控件和js实现，基于该博主的代码和思路，在vue下实现了相应功能

思路

生成html字符串来实现文字高亮标红效果，但是input输入控件不能渲染html字符串，那就用div来渲染html字符串，将输入框的背景和文字设置为透明，层级设置在div上面，这样用户输入时操作的是输入框，渲染时用的是下面的div。

代码

 <div class="main">
            <div
              class="highlight-div"
              v-html="highlightBracketContent(inputData)"
            ></div>
            <el-input
              class="highlight-input"
              v-model="inputData"
              type="textarea"
              :autosize="{ minRows: 6 }"
              resize="none"
            ></el-input>
          </div>

我的项目中需求是把括号内的内容标红

methods: {
    /** 生成中英文括号内标红的html字符串 */
    highlightBracketContent(inputText) {
	      // 匹配中英文括号内的内容（包括中文括号和英文括号）
	      const regex = /([（(])(.*?)([)）])/g;

      // 使用正则替换匹配到的文本，并加上红色标记
      const result = inputText.replace(
        regex,
        function (match, openBracket, content, closeBracket) {
          // openBracket 是左括号，content 是括号内的内容，closeBracket 是右括号
          if (content.includes("该数据内容仅供参考")) {
            return `${openBracket}<span style="color: red;">${content}</span>${closeBracket}`;
          } else {
            return `${openBracket}<span>${content}</span>${closeBracket}`;
          }
        }
      );
      return result;
    },

样式要注意设置el-textarea样式和div的样式保持一致，不然光标位置有问题

.main {
  position: relative;
}
.highlight-div {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 100%;
  box-sizing: border-box;
  font-size: 14px;
  word-break: break-all;
  white-space: pre-wrap;
  padding: 5px 15px;
  line-height: 1.5;
  color: #909399;
}
::v-deep .highlight-input {
  position: relative;
  width: 100%;
  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;
  .el-textarea__inner {
    -webkit-text-fill-color: transparent;
    background: rgba(0, 0, 0, 0);
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
  }
}