返回

像微信那样,搜索关键字高亮显示

IOS





文本的搜索原理相对来说还是比较简单的,原理都是通过字符串匹配来完成的,主要步骤如下:

1. 用户在搜索框中输入一个查询字符串。
2. 将查询字符串分解成单个的关键词。
3. 将关键词与文本内容进行匹配。
4. 将匹配到的结果高亮显示。

虽然步骤很简单,但是实际实现起来还是有一些难点的,比如:

* 如何准确地将查询字符串分解成单个的关键词。
* 如何高效地将关键词与文本内容进行匹配。
* 如何美观地将匹配到的结果高亮显示。

**需要满足的要求** 
文本内的查询高亮显示,其需要满足的要求如下:

* **查询的高亮显示方式:**  高亮显示查询结果的方式有多种,比较常见的为改变查询词在结果中显示的颜色,比如变为黄色;还有一种是变为橙色,并以加粗的形式呈现。
* **多关键词组合查询:**  能够实现多关键词的组合查询,对于组合查询,需要将符合条件的所有内容都进行高亮显示,并在结果中一一列出。
* **中文和英文混合查询:**  需要能够支持中文和英文的混合查询,并且查询结果中的中英文均能成功地被高亮显示。

微信搜索的实现方案参考

微信对搜索关键词的高亮实现逻辑可以归结为如下的三点:

* **分词:**  首先将中文的查询字符串分词。
* **匹配:**  将分词后的关键词与文本内容进行匹配,并记录下匹配到的位置。
* **高亮:**  将匹配到的位置高亮显示。

对于微信来说,它是先将关键词分词成单个的字符,然后将这些字符与文本内容进行匹配。

**分词** 
微信对关键词的分词逻辑如下:

* 将关键词中的所有空格都去除掉。
* 将关键词中的所有中文都分词成单个的字符。
* 将关键词中的所有英文都保持不变。

**匹配** 
微信将分词后的关键词与文本内容进行匹配的逻辑如下:

* 将关键词中的每一个字符都与文本内容中的每一个字符进行比较。
* 如果找到一个匹配的字符,就将该字符的位置记录下来。
* 如果没有找到任何匹配的字符,就返回一个空的列表。

**高亮** 
微信将匹配到的位置高亮显示的逻辑如下:

* 将匹配到的位置用 HTML 的 `strong` 标签包裹起来。
* 将 HTML 代码插入到文本内容中。

**代码实现** 
```python
def highlight_keyword(text, keyword):
    """
    对文本中的关键词进行高亮显示。

    Args:
        text: 文本内容。
        keyword: 关键词。

    Returns:
        高亮显示后的文本内容。
    """

    # 将关键词分词成单个的字符。
    keywords = list(keyword)

    # 将文本内容中的所有中文都分词成单个的字符。
    text = ''.join(list(jieba.cut(text)))

    # 将分词后的关键词与文本内容进行匹配。
    matches = []
    for keyword in keywords:
        for i, char in enumerate(text):
            if char == keyword:
                matches.append((i, i + 1))

    # 将匹配到的位置用 HTML 的 `strong` 标签包裹起来。
    for start, end in matches:
        text = text[:start] + '<strong>' + text[start:end] + '</strong>' + text[end:]

    # 将 HTML 代码插入到文本内容中。
    return text

结语
微信对的精准匹配和搜索结果的高亮显示堪称典范。本文解析了实现这个效果的具体方案,希望对大家有所帮助。