js实现代码高亮显示

 

<template>
    <div>
        <div class="operation">
            <input type="text" id="text" placeholder="请输入关键字"/>
            <el-button @click="highlightBtn">高亮</el-button>
        </div>
        
        <div id="content">
            js实现代码高亮显示
            无忧无虑 自由自在 幼稚可笑 挺胸碘肚
            牙牙学语 嘻嘻哈哈 你追我赶 抱头鼠窜
            逃之夭夭 穷追猛打 乱作一团 鸡飞狗跳
        </div>
    </div>
</template>
<script>
export default {
    methods:{
        highlightBtn() {
            var content = document.getElementById("content");
            var contents = content.innerHTML;
            var text = document.getElementById("text");
            var value = text.value;
            var values = contents.split(value);
            content.innerHTML = values.join('<span style="background:red;">' + value + '</span>');
        }
    }
}
</script>
<style scoped>
.operation {
    margin-bottom: 20px;
}
#text {
    width: 400px;
    height: 33px;
    border-radius: 0.5em;
    border: 1px solid #409eff;
}
</style>

效果图：