web模拟textarea内容高亮显示

1.div模拟textarea

<style>
	.box{ 
	    width: 400px;
	    height: 100px; 
	    outline: none;
	    border: 1px solid #a0b3d6;
	}
	.box:focus{
		outline: none;
	}
</style>
<div contenteditable="true" class="box" v-html="realText(keywords)">
	
</div>

2.内容进行高亮显示

data(){
	return {
		keywords:''
	}
},
methods:{
	realText(text) {
		let reg = new RegExp('要高亮的关键词', 'ig');
		return text.replace(reg, (keyword) => {
			return `<span style="color:red">${keyword}</span>`
		});
	},
}