根据搜索关键字实现搜索结果列表文字高亮效果

根据搜索关键字实现搜索结果列表文字高亮效果

在前端开发中，为了增强用户体验，我们常常需要实现根据关键词检索后对搜索结果中的匹配项进行高亮显示。实现这一功能通常有以下三种策略：

• 前端处理高亮显示（后端只返回纯文本）：
  • 后端仅提供原始数据，所有的高亮逻辑都在前端完成
  • 前端接收到数据后，通过JavaScript等手段查找并标记出与搜索词相匹配的部分
• 后端返回带有标记的文本：
  • 后端不仅返回搜索结果，还会将匹配到的关键词用特定的HTML标签包裹起来，如<mark / >或自定义标签
  • 前端只需直接渲染这些内容即可
• 后端返回匹配位置，前端负责高亮：
  • 后端除了给出搜索结果外，还会告知每个匹配项的具体位置信息（例如起始和结束索引）
  • 前端依据这些位置信息对相应文本片段进行高亮处理

本文将重点探讨第一种方案，即由前端完全负责实现关键词检索后的高亮显示。这种方法能够保持前后端职责分离清晰，并且可以灵活地调整样式而不必修改后端代码。

前端处理高亮显示（后端只返回纯文本）

后端接口设计

后端只返回普通的字段，不需要带任何高亮标记。

前端渲染实现

• 前端获取到数据后，根据keyword进行字符串匹配
• 匹配成功后，将匹配到的部分用span标签包裹起来，并设置样式为高亮显示

// 封装一个函数，进行通用
/**
 * @param {string} text - 原始文本
 * @param {string} keywordText 关键词文本
 * @return {string} 高亮后的文本
 * **/
const textHighLight = (text, keywordText) => {
    const textArr = text.split('');
    const keywordTextArr = keywordText.split('');

    const result = textArr.map(item => {
        return keywordTextArr.includes(item) ? `<span style="color:red;">${item}</span>` : item
        })
    return result.join('')
}

const data = '这是一段关键字测试文本'
const keyword = '关键字'

<p v-html="textHighlighting(data, keyword)"></p>

演示结果

------THE END------