想要实现和百度搜索一样的输入的关键字标红

Question

想要实现和百度搜索一样的输入的关键字标红

目前的代码为：

{% block main_body %}
    <div class = "container">
        <div class = "row">
            <div class = "col-md-8 col-mid-offset-2">
                {% if search_word == '' %}
                    <h3>您没有搜索任何内容。</h3>
                    <hr>
                    <p>您可以尝试输入点什么， 例如：<a href="/search/?wd=浙江民营企业发展大厦">浙江民营企业发展大厦</a></p>
                {% else %}
                    <h5 style =" color: dimgrey ">搜索"{{ search_word }}", 共找到{{ search_result_count }}个结果</h5>
                        {% for vo in page_of_search %}
                        <hr>
                            <h4 class="entry-title" style =" color: mediumblue"><a href="{% url vo.name %}"><u>{{ vo.name }}</u></a></h4>
                            <p class="fa fa-map-marker"> 地址 ：{{ vo.address }}</p>
                        {% empty %}
                        <p>未找到要搜索的目标</p>
                        {% endfor %}
                {% endif %}
            </div>
        </div>
        <div class = "row">
            <ul class="pagination pagination-sm no-margin pull-right">
            <li><a href="{% url 'search' %}?wd={{ search_word }}&page= 1">首页</a></li>
            {% if page_of_search.has_previous %}
                <li><a class = "btn btn-default" href = "{% url 'search' %}?wd={{ search_word }}&page={{ page_of_search.previous_page_number }}">上一页</a></li>
            {% else %}
                <li><a class = "btn btn-default" href = "{% url 'search' %}?wd={{ search_word }}&page= 1">上一页</a></li>
            {% endif %}
            {% for p in plist %}
                    <li {% if p == page_of_search.number%}class="active" {% endif %}><a href="{% url 'search' %}?wd={{ search_word }}&page={{ p }}">{{p}}</a></li>
            {% endfor %}
            {% if page_of_search.has_next %}
                <li><a class = "btn btn-default" href = "{% url 'search' %}?wd={{ search_word }}&page={{ page_of_search.next_page_number }}">下一页</a></li>
            {% else %}
                <li><a class = "btn btn-default" href = "{% url 'search' %}?wd={{ search_word }}&page= {{ maxpages }}">下一页</a></li>
            {% endif %}
            <li><a href="{% url 'search' %}?wd={{ search_word }}&page= {{ maxpages }}">尾页</a></li>
            </ul>
        </div>
    </div>

{% endblock %}

def search(request):
   search_word = request.GET.get('wd', '')
   if search_word == '':
       building_result = Building.objects.filter(name__contains=search_word)
       coperation_result = Corporation.objects.filter(name__contains=search_word)
   else:
     word_list = jieba.lcut(search_word, cut_all=True)
     pattern = ''
     for word in word_list:
       pattern += '(?=.*' + word + ')'
     building_result = Building.objects.filter(Q(name__iregex=pattern) | Q(address__iregex=pattern))
     coperation_result = Corporation.objects.filter(Q(name__iregex=pattern) | Q(address__iregex=pattern))

   tmp_content_list = set()
   if building_result:
       tmp_content_list = set(building_result)

   # 最后将符合条件的文章标题模型和文章内容模型合并返回
   info_list = set()
   if coperation_result:
       info_list = set(coperation_result)

   # 在从文章标题模型中查找出最终汇总的模型返回
   search_result_set = info_list.union(tmp_content_list)
   search_result = list(search_result_set)

   #分页
   page = Paginator(search_result, 10)  # 以每页10条数据分页
   page_num = request.GET.get('page',1)
   page_of_search = page.get_page(page_num)
   maxpages = page.num_pages  # 获取最大页数

   plist = page.page_range  # 获取页码列表信息

   context = {'search_word':search_word,  'search_result':search_result,'search_result_count':len(search_result),'plist':plist,
              'page_of_search':page_of_search,'maxpages':maxpages,}
   return render(request, 'web/search.html',context)

目前的效果：

想要的效果：

麻烦给具体步骤或者代码，谢谢

Answer 1

可以使用 Django 自带的 safe 过滤器和正则表达式来实现搜索关键词标红的效果。具体实现如下：

1.在模板中导入 re 模块。

{% load static %}
{% load humanize %}
{% load mytags %}
{% load myfilters %}
{% load mathfilters %}
{% load bootstrap3 %}

{% load staticfiles %}
{% load crispy_forms_tags %}

{% load i18n %}
{% load tz %}
{% load re %}

2.使用正则表达式来匹配搜索关键词，并用 span 标签将其包裹起来。

<h4 class="entry-title" style =" color: mediumblue"><a href="{% url vo.name %}"><u>{{ vo.name|safe|re_sub:search_word|safe }}</u></a></h4>

其中，re_sub 是一个自定义的模板过滤器，其代码如下：

import re

from django import template

register = template.Library()

@register.filter
def re_sub(value, arg):
    """
    Replace all occurrences of the search string (arg) in the given string (value)
    with a span tag that highlights the matched string.
    """
    return re.sub(re.escape(arg), '<span class="highlight">\g<0></span>', value, flags=re.IGNORECASE)

这个过滤器会将所有匹配到的搜索关键词用 span 标签包裹起来，并添加一个 highlight 的 CSS 类来实现高亮效果。你可以根据需要修改这个 CSS 类的样式。

回答不易，希望对你有用，能够采纳。