m0_51866971
m0_51866971
采纳率100%
2021-01-07 16:39

怎么使用vue匹配两个字符串找出不同的内容高亮

已采纳

怎么使用vue匹配两个字符串找出不同的内容高亮

var a='床前明月光'

var b='床前明月亮光'

找出亮并且变成红色字体

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • Menkongkong Menkongkong 4月前
    <div>
            <!-- 因为要改变的是单个字符的颜色,需要将字符串转为数组然后通过v-for渲染每一个文字元素 -->
            <!-- [choose.indexOf(item) >= 0 ?'changeBlack':'changeRde']动态绑定样式,当item的内容与choose中的内容不匹配时,也就是choose数组中没有与之相匹配的文字时,文字为红色 -->
            <!-- choose.indexOf(item) 当匹配成功时会返回该元素在数组中的位置,不匹配时返回-1-->
            <span v-bind:class="[choose.indexOf(item) >= 0 ?'changeBlack':'changeRed']" v-for="(item,key) in textArray" :key="key">
                {{item}}
                <!-- 当key+1的值等于第一个字符串的长度时,实现换行 -->
                <div v-if="key+1 == text1.length "></div>
            </span>
    </div>
    
    data(){
            return{
                //text1和text2为字符串
                text1:'窗前明月光',
                text2:'窗前明月亮光',
                //textArray存放的内容是将字符串转为数组后的字符元素
                textArray:[],
                //存放的内容为查重后的重复元素
                choose:[],
            }
        }
    
    changeArray() {
                //定义text3,值为text1和text2两个相连
                var text3 = this.text1+this.text2
                //将text3字符串转为数组存放到textArray中
                this.textArray = text3.split('');
                //for循环嵌套查找重复元素
                for (let i = 0; i < this.textArray.length; i++) {
                    for (let j = 0; j < this.textArray.length; j++) {
                        //textArray数组中每一个元素去与其它元素进行对比
                        if (this.textArray[i] == this.textArray[j] && i != j) {
                            //将对比后重复的元素插入到choose数组中
                            this.choose.push(this.textArray[i])
                        } 
                    }
                }
            },
    点赞 评论 复制链接分享
  • Menkongkong Menkongkong 4月前

    如果帮助到你 请采纳

    点赞 评论 复制链接分享
  • qq_43656607 放风喽 4月前

    首先对比出不一样的关键字,这个不用说吧。

    获取不一样的关键字数组,再遍历两个字符串a,b,把“亮”替换成“<span class="text-red-500">亮</span>”

    注意渲染的时候,使用v-html,不能用v-text或者{{a}}{{b}}

    点赞 评论 复制链接分享

相关推荐