vue项目实现错误高亮，jquery-highlighttextarea踩坑-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34644270/article/details/115869074

在Vue项目中使用jquery-highlighttextarea实现文本高亮时遇到了字符转换和高亮异常问题。通过引入jQuery及相关依赖，并在数据更新时执行高亮方法。为解决特殊字符导致的高亮错乱，选择了直接修改库的源码，针对75行进行处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

首先安装依赖
- “jquery”: “^3.5.1”,
- “jquery-highlighttextarea”: “^3.2.1”,
- “jquery-ui”: “^1.12.1”,
  看了很多库都是基于jq的，次产品提的需求是要在输入框内实现，只找到jquery-highlighttextarea满足。
配置jquery

chainWebpack: config => {
        config
            .plugin('provide')
            .use(webpack.ProvidePlugin, [{
                $: 'jquery',
                jquery: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
            }])
    },

引入依赖

	import 'jquery-highlighttextarea/jquery.highlighttextarea.css'
	import 'jquery-highlighttextarea/jquery.highlighttextarea.js'

编写高亮及清除方法

   /**
     * 设置高亮错误提示
     */
        setErrorTextHighLight() {
            this.$nextTick(() => {
                $(`.bgHighLight .el-input__inner`).highlightTextarea({
                    words: [
                        {
                            color: '#ffff00',
                            words: [
                                '[\uFF00-\uFFFF\u2E80-\u9FFF\u00ab\u00bb\u2026]+',
                                '[~_|“”*‘’]',
                            ],
                        },
                    ],
                    caseSensitive: false,
                })
            })
        },
        // clear清除数据
        dataClear(e) {
            $(
                `.${e} .highlightTextarea .highlightTextarea-container .highlightTextarea-highlighter mark`
            ).each((i, e) => {
                e.innerText = ''
            })
        },

数据更新钩子进行高亮方法执行

this.$once('hook:updated', () => {
            this.setErrorTextHighLight()
        })

遇到的问题

有几个特殊字符作者进行了转换

{
    '&': "&amp;",
    '"': "&quot;",
    '<': "&lt;",
    '>': "&gt;"
               }

高亮符号里添加了：；后高亮就异常了。生成的标签出现错乱。

我目前的解决办法把源码拷贝到本地一份, 修改源码.
jquery-highlighttextarea3.2.1版本 75行对获取到的文本进行处理
/ 高亮异常同上处理