使用Vue3实现文章内容中多个"关键词"标记高亮显示,一般可以通过以下步骤实现:
-
获取文章内容和关键词列表:首先需要在Vue组件中获取文章内容和关键词列表。可以从父组件传递文章信息和关键词信息给子组件,或者使用Vue的数据绑定机制来获取数据。
-
对文章内容进行高亮处理:遍历关键词列表,对每个关键词在文章内容中进行替换,替换后的内容使用高亮样式展示。
下面我们来具体实现这个功能:
- 获取文章内容和关键词列表
我们假设文章信息包含title
和content
两个字段,关键词列表是一个字符串数组keywords
。
<template>
<div>
<h1>{{ article.title }}</h1>
<div v-html="highlightedContent"></div>
</div>
</template>
<script>
export default {
props: {
article: {
type: Object,
required: true
},
keywords: {
type: Array,
required: true
}
},
computed: {
highlightedContent() {
let content = this.article.content;
for (const keyword of this.keywords) {
content = content.replace(
new RegExp(keyword, "gi"),
match => `<span class="highlight">${match}</span>`
);
}
return content;
}
}
};
</script>
- 对文章内容进行高亮处理
我们使用正则表达式在文章内容中查找关键词,并用<span>
标签将它们包裹,并添加类名highlight
。
在上述代码中,我们定义了一个计算属性highlightedContent
,用于替换文章内容中的关键词并添加高亮样式,最终将这个计算属性展示在页面中。
示例1: 在文章列表页面中展示文章
在一个文章列表页面中,可能需要对每篇文章的标题和预览内容都进行关键词高亮处理。可以通过一个组件来实现这个功能。
<template>
<div>
<h2>Articles</h2>
<ul>
<li v-for="article in articles" :key="article.id">
<h3>{{ highlight(article.title) }}</h3>
<p v-html="highlight(article.preview)"></p>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
articles: {
type: Array,
required: true
},
keywords: {
type: Array,
required: true
}
},
methods: {
highlight(text) {
for (const keyword of this.keywords) {
text = text.replace(
new RegExp(keyword, "gi"),
match => `<span class="highlight">${match}</span>`
);
}
return text;
}
}
};
</script>
在这个组件中,我们使用v-for
指令遍历所有文章,并在每个文章标题和内容中使用highlight
方法进行关键词高亮处理。
示例2: 在评论中展示用户搜索到的关键词和上下文
在一个评论页面中,可能需要对用户搜索到的关键词在评论中进行高亮处理,并展示关键词的上下文。可以通过以下代码实现这个功能。
<template>
<div>
<h2>Search Results for "{{ query }}"</h2>
<ul>
<li v-for="result in results" :key="result.id">
<h3>{{ result.title }}</h3>
<p>{{ highlight(result.content, result.match) }}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
query: {
type: String,
required: true
},
results: {
type: Array,
required: true
}
},
methods: {
highlight(text, match) {
const regexp = new RegExp(match, "gi");
const startIndex = text.search(regexp);
const endIndex = startIndex + match.length;
const context =
text.substr(startIndex - 50, 50) +
"<span class='highlight'>" +
text.substr(startIndex, match.length) +
"</span>" +
text.substr(endIndex, 50);
return context;
}
}
};
</script>
在这个组件中,我们假设用户搜索的关键词是query
,并且搜索结果是一个数组,每个结果包含title
、content
以及match
字段。match
字段是该结果中匹配到的关键词。
在highlight
方法中,我们使用RegExp
对象在评论内容中查找匹配的关键词,然后根据关键词的位置生成上下文,用<span>
标签高亮显示关键词。
这样就可以实现对多个关键词的标记高亮显示了。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:如何使用Vue3实现文章内容中多个”关键词”标记高亮显示 - Python技术站