Django：如何高亮搜索结果中正文匹配关键词的片段

没问题！我刚好做过类似的功能，给你一套完整的实现方案，完美复刻谷歌搜索那种带高亮片段的效果，分步骤来：

1. 编写文本处理工具函数 #

首先我们需要一个工具函数，负责从正文中提取包含搜索词的上下文片段，并对搜索词进行高亮处理。建议把它放在你的app目录下的utils.py文件中：

import re
from django.utils.html import escape

def get_highlighted_snippet(text, search_term, context_length=100):
    # 先转义文本和搜索词，避免XSS攻击和正则注入
    safe_text = escape(text)
    safe_search_term = escape(search_term)
    
    # 构建大小写不敏感的正则匹配规则
    match_pattern = re.compile(re.escape(safe_search_term), re.IGNORECASE)
    match = match_pattern.search(safe_text)
    
    if not match:
        # 如果没找到匹配的内容，返回正文开头的片段
        return safe_text[:context_length*2] + '...' if len(safe_text) > context_length*2 else safe_text
    
    # 计算截取上下文的起止位置，确保不会超出文本边界
    start_pos = max(0, match.start() - context_length)
    end_pos = min(len(safe_text), match.end() + context_length)
    
    # 截取片段并添加省略号（如果不是文本首尾的话）
    snippet = safe_text[start_pos:end_pos]
    if start_pos > 0:
        snippet = '...' + snippet
    if end_pos < len(safe_text):
        snippet = snippet + '...'
    
    # 用HTML标签包裹匹配的搜索词，实现高亮
    highlighted_snippet = match_pattern.sub(r'<span class="highlight">\g<0></span>', snippet)
    return highlighted_snippet

2. 在视图中集成高亮逻辑 #

接下来修改你的搜索视图，给每个查询到的博客对象添加一个highlighted_snippet属性，值就是上面函数处理后的结果：

from django.views.generic import ListView
from .models import BlogPost  # 替换成你的博客模型类
from .utils import get_highlighted_snippet

class BlogSearchView(ListView):
    model = BlogPost
    template_name = 'blog/search_results.html'  # 替换成你的结果模板路径
    context_object_name = 'blog_posts'
    
    def get_queryset(self):
        search_query = self.request.GET.get('q', '')
        if not search_query:
            return BlogPost.objects.none()
        
        # 这里用你原来的搜索过滤逻辑（比如icontains）
        queryset = BlogPost.objects.filter(body_text__icontains=search_query)
        
        # 给每个博客对象添加高亮片段
        for post in queryset:
            post.highlighted_snippet = get_highlighted_snippet(post.body_text, search_query)
        
        return queryset

如果是函数视图，逻辑类似：在获取查询集后遍历处理每个对象即可。

3. 在模板中渲染高亮内容 #

最后在搜索结果模板中，渲染我们生成的高亮片段，记得加上|safe过滤器，不然Django会转义HTML标签：

{% extends 'base.html' %}

{% block content %}
<h2>搜索结果：{{ request.GET.q }}</h2>

{% for post in blog_posts %}
<div class="search-result-item">
    <h3><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></h3>
    <p class="post-meta">作者：{{ post.author }} | 发布日期：{{ post.publish_date|date:"Y-m-d" }}</p>
    <!-- 渲染高亮片段，safe过滤器让HTML高亮标签生效 -->
    <p class="snippet">{{ post.highlighted_snippet|safe }}</p>
</div>
{% empty %}
<p>没有找到匹配的博客内容</p>
{% endfor %}
{% endblock %}

4. 添加高亮样式（可选但推荐） #

为了让高亮更显眼，在你的CSS文件中添加样式：

.highlight {
    background-color: #fff3cd;  /* 柔和的黄色背景 */
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
}

一些额外的优化建议 #

• 可以把context_length做成可配置的参数，比如从settings里读取，方便调整上下文的长度
• 如果需要支持多个搜索词，可以修改函数，把搜索词按空格拆分后分别进行高亮
• 对于非常长的正文，可以考虑用数据库的全文搜索功能（比如PostgreSQL的全文搜索）来更精准地定位匹配位置，提升性能

内容的提问来源于stack exchange，提问作者Miguel