vue实现对一段文字中违禁词的校验

<template>
    <div>
        <ks-dialog
            ref="categoryDialog"
            title="不建议使用词排查入口"
            class="dialog-style"
            :visible.sync="dialogVisible"
            :modal-append-to-body="false"
            :close-on-click-modal="false">
            <div class="desc">
                <h3>请您在进行商品描述时尽量避免加入一些极限描述词，例如：</h3>
                <div class="key-words">{{ showWords }}</div>
                <template v-if="updateStatus !== 2">
                    <div>
                        <h3>当前输入内容(内容中出现的不建议使用词已经用红色字体标注)：</h3>
                        <div class="now-write" style="font-size:1rem" v-html="validateWords"></div>
                    </div>
                    <div>
                        <h3 class="correct-words">请根据不建议使用词法进行修改：</h3>
                        <ks-input v-model="afterCorrectWord" style="font-size:1rem" :autosize="{minRows: 1, maxRows: 8}" type="textarea" @input="valueChange"></ks-input>
                    </div>
                </template>
            </div>
            <span class="button-style">
                <ks-button style="color:#446DF5;" class="btn" @click="dialogVisible = false">取 消</ks-button>
                <ks-button v-if="updateStatus === 2" class="btn" type="primary" @click="dialogVisible = false">确 定</ks-button>
                <ks-button v-else class="btn" type="primary" @click="validate()">确 定</ks-button>
            </span>
        </ks-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            afterCorrectWord: '',
            validateWords: '',
            updateStatus: 0, // 商品标题0、商品卖点1 透明素材图2
            // haveProhibitedWords: false,
            keyWords: [
                '第一', 'No.1', 'NO.1', 'TOP.1', 'top.1', 'Top.1', '最', '国家级', '全球级', '宇宙级', '世界级', '顶级',
                '顶尖', '尖端', '绝佳', '绝对', '极', '独家', '首', '冠军',
                '国家领导人', '填补国内空白', '王牌', '领先', '领袖', '之王', '至尊', '巅峰', '王者', '史无前例', '前无古人',
                '永久', '万能', '祖传', '特效', '无敌', '纯天然', '100%'
            ],
            showWords: '第一, No.1, NO.1, TOP.1, top.1, Top.1, 最, 国家级, 全球级, 宇宙级, 世界级, 顶级,顶尖, 尖端, 绝佳, 绝对, 极, 独家, 首, 冠军, 国家领导人, 填补国内空白, 王牌, 领先, 领袖, 之王, 至尊, 巅峰, 王者, 史无前例, 前无古人,永久, 万能, 祖传, 特效, 无敌, 纯天然, 100%。',
            dialogVisible: false
        }
    },
    methods: {
        validate() {
            // this.$confirm(this.haveProhibitedWords ? '输入内容中仍存在广告法违禁词，请确认是否继续？' : '即将修改输入内容，请确认是否继续？', '提示', {
            this.$confirm('即将修改输入内容，请确认是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.$emit('confirmUpdateAd', { afterCorrectWord: this.afterCorrectWord, updateStatus: this.updateStatus })
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                })
                this.dialogVisible = false
            }).catch(() => {})
        },
        valueChange(val) {
            const word = this.keyWords
            let value = val
            if (val !== null) {
                for (const i in word) {
                    const reg = new RegExp(word[i], 'g')
                    if (value.indexOf(word[i]) != -1) {
                        const result = value.replace(reg, `<span style="color:#f03b2c">${word[i]}</span>`)
                        value = result
                        // this.haveProhibitedWords = true
                    }
                }
            }
            this.validateWords = value
        },
        dialogOpen(val) {
            this.afterCorrectWord = val
            const word = this.keyWords
            let value = val
            if (val !== null) {
                for (const i in word) {
                    /* 替换全部空格 */
                    const reg = new RegExp(word[i], 'g')
                    // 判断内容中是否包括敏感词
                    if (value.indexOf(word[i]) != -1) {
                        const result = value.replace(reg, `<span style="color:#f03b2c">${word[i]}</span>`)
                        value = result
                        // this.haveProhibitedWords = true
                    }
                }
            }
            this.validateWords = value
            this.dialogVisible = true
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog-style{
    ::v-deep.ks-dialog{
        width: 800px;
        .ks-dialog__header{
            font-size: 16px;
            height: 70px;
            border-bottom: 1px solid #D9DFEA;
        }
    }
}
.desc{
    padding: 0 20px 20px 20px;
    .key-words{
        margin: 20px 0 ;
        width: 100%;
        border: 1px solid #c4c4c4;
        padding: 10px;
        color: #f03b2c;
    }
    .now-write{
        border: 1px solid #c4c4c4;
        padding: 10px;
        line-height: 20px;
        min-height: 30px;
        margin-top: 10px;
    }
    .correct-words{
        margin: 20px 0 20px 0;
    }
}
.button-style{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .btn{
        border: 1px solid #446DF5;
        height: 40px;
        width: 120px;
        border-radius: 40px;
        margin: 0 1rem;
    }
}
</style>

效果如图：