返回
像微信那样,搜索关键字高亮显示
IOS
2023-09-12 00:39:44
文本的搜索原理相对来说还是比较简单的,原理都是通过字符串匹配来完成的,主要步骤如下:
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
结语
微信对的精准匹配和搜索结果的高亮显示堪称典范。本文解析了实现这个效果的具体方案,希望对大家有所帮助。