Как выделить поисковые запросы на странице результатов шаблона Django?

Question

У меня есть следующий поисковый запрос в views.py:

class SearchView(View):
    def get(self, request, *args, **kwargs):
        queryset = BlogPost.objects.all()
        query = request.GET.get('q')
        if query:
            queryset = queryset.filter(
                Q(title__icontains=query) |
                Q(content__icontains=query)
            ).distinct()
        context = {
            'queryset': queryset,
            'query': query,
        }
        return render(request, 'blogs/search_result.html', context)

, и если я ищу слово типа Tesla, результаты, показанные в шаблоне результатов, будут такими, как показано ниже:

Пожалуйста, помогите мне, как выделить выделенный запрос желтым цветом в шаблонах Django?Спасибо за помощь!

edit: Это код шаблона с окном поиска

<div class="card my-4">
    <div class="card-body">
        <div class="card-title">Search blog</div>
        <form action="{% url 'blog:search_blog' %}">
            {% csrf_token %}
            <input type="text" class="form-control" name="q" placeholder="What are you looking for?">
            <input type="submit" value="Search" class="btn btn-success btn-sm mt-3">
        </form>
    </div>
</div>

Это шаблон для result_search

{% block content %}
<div class="container bg-light w-100">
    <h2 class="display-6 border-bottom py-3">Results for "{{ query }}"</h2>
    {% for post in queryset %}
    <div class="my-1">
        <a class="link" href="{{ post.get_absolute_url }}">{{ post.title }}</a>
    </div>
    {% endfor %}
</div>
{% endblock %}

Спасибо

Редактировать 2: Даниэль Роузман, сэр, это HTML ниже, я выделил его желтым цветом.

Answer 1

Вы можете сделать это в шаблонном фильтре.Что-то вроде:

@register.filter
def highlight_search(text, search):
    highlighted = text.replace(search, '<span class="highlight">{}</span>'.format(search)
    return mark_safe(highlighted)

Теперь в вашем шаблоне вы можете сделать:

{% load my_tags %} # wherever you put the template filter

{% for post in queryset %}
<div class="my-1">
    <a class="link" href="{{ post.get_absolute_url }}">{{ post.title|highlight_search:query }}</a>
</div>
{% endfor %}

Вам необходимо отправить search_text обратно с контекстом, который отображает страницу результатов.

Answer 2

Попробуйте изменить backgroud-color на div, к которому добавляются результаты поиска, например

.link {
    background-color: yellow;
}