2023.12.14

最新推荐文章于 2024-07-09 21:18:14 发布

qq_42349946

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量388

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42349946/article/details/135046498

版权

请用Vue实现一个高亮文字展示的组件
将text文案中 与match匹配的内容进行高亮
高亮部分字体颜色为红色加粗，其他文案为黑色细体
<HighlightText text="abcabccabcbacdcabacdab" match={['abc','cba','bc']} />

<template>
	<div>
		<span class="content">{{showText}}</span>
	</div>
</template>
<script lang=''ts">
export default {
	data() {
		return {
			text: 'abcabccabcbacdcabacdab',
			match: ['abc','cba','bc']
		}
	},
	computed: {
		showText() {
			for(let i = 0; i < match.length; i++) {
			    const regex = new RegExp(match[i], 'gi');
			    if(regex.test(this.text)) {
			        this.text = this.text.replace(regex, `<span style="color: red; fontWeight: bold;">${match[i]}</span>`);
			    }
			}
			return this.text;
		}
	}
	mounted() {
	}
}
</script>
<style lang="less">
.content {
	color: #000;
	font-weight: 400;
}
</style>