github.com/TopAlien/vu…
TextMark组件
<script setup>
import { ref } from 'vue'
const props = defineProps({
textToHighlight: {
type: String,
default: ''
},
searchWords: {
type: Array,
default: () => []
},
activeClassName: { type: String, default: 'text_mark_default' },
highlightClassName: {
type: Object,
default: () => {}
}
})
const useBrightenKeyword = (result, keyword) => {
if (!result || !keyword) return result
const Reg = new RegExp(keyword.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&'), 'gi')
return result.replace(
Reg,
`<span class="${props.highlightClassName[keyword] || props.activeClassName}">${keyword}</span>`
)
}
const markText = ref('')
const setMarkText = () => {
let tempStr = props.textToHighlight
props.searchWords.forEach((text) => {
tempStr = useBrightenKeyword(tempStr, text)
})
markText.value = tempStr
}
setMarkText()
</script>
<template>
<div v-html="markText" />
</template>
<style>
.text_mark_default {
color: blue;
}
</style>
使用
<script setup>
import TextMark from '@/components/TextMark/index.vue'
const text =
'c++奴才总不过是寻人诉苦。只要这样，也只能这样。有一日，他遇到一个聪明人。“先生！”他悲哀地说，眼泪联成一线，就从眼角上直流下来。“你知道的。我所过C==的简直不是人的生活。吃的是一天未必有一餐，这一餐又不过是高粱皮，连猪狗都不要吃的，尚且只有一小碗……。”“这实在令人同情。”聪明人也惨然说。“可不是么！”他高兴了。“可是做工是昼夜无休息的：清早担水晚烧饭，上午跑街夜磨面，晴洗衣裳雨张伞，冬烧汽炉夏打扇。半夜要煨银耳，侍候主人耍钱；头钱从来没分，有时还挨皮鞭……。”“唉唉……。”聪明的人叹息着，眼圈有些发红，似乎要下泪。“先生！我这样是敷衍不下去的。我总得另外想法子。可是什么法子呢？……”“我想，你总会好起来……。”“是么？但愿如此。可是我对先生诉了冤苦，又得你的同情和慰安，已经舒坦得不少了。可见天理没有灭绝……。”但是，不几日，他又不平起来了，仍然寻人去诉苦。“先生！”他流着眼泪说，“你知道的。我住的简直比猪窠还不如。主人并不将我当人；他对他的叭儿狗还要好到几万倍……。”“混帐！”那人大叫起来，使他吃惊了。那人是一个傻子。“先生，我住的只是一间破小屋，又湿，又阴，满是臭虫，睡下去就咬得真可以。秽气冲着鼻子，四面又没有一个窗……。”“你不会要你的主人开一个窗的么？”“这怎么行？……”“那么，你带我去看去！”傻子跟奴才到他屋外，动手就砸那泥墙。“先生！你干什么？”他大惊地说。“我给你打开一个窗洞来。”“这不行！主人要骂的！”“管他呢！”他仍然砸。“人来呀！强盗在毁咱们的屋子了！快来呀！迟一点可要打出窟窿来了！……”他哭嚷着，在地上团团地打滚。一群奴才都出来了，将傻子赶走。听到了喊声，慢慢地最后出来的是主人。“有强盗要来毁咱们的屋子，我首先叫喊起来，大家一同把他赶走了。”他恭敬而得胜地说。“你不错。”主人这样夸奖他。这一天就来了许多慰问的人，聪明人也在内。“先生。C++这回因为我有功，主人夸奖了C--我了。你先前说我总会好起来，实在是有先见之明……。”他大有希望似的高兴地说。“可不是么……。'
</script>
<template>
<TextMark
activeClassName="cus-mark"
:textToHighlight="text"
:searchWords="['c++', '可', '你']"
:highlightClassName="{ 'c++': 'c-class-name' }"
/>
</template>
<style>
.cus-mark {
color: red;
}
.c-class-name {
color: blue;
font-weight: bold;
background-color: yellow;
}
</style>
