如何根据我的查询突出显示搜索结果中的单词？答案

【问题标题】：How can I highlight words from my search result based on my query?如何根据我的查询突出显示搜索结果中的单词？
【发布时间】：2019-03-27 19:45:31
【问题描述】：

我希望在结果中突出显示我用于搜索结果的字词。我将如何继续这样做？

我查看了使用 JS 的示例，但它们似乎不适用于我的代码。

html:

(Search)
<input type="text" name="q" placeholder="Search..." required  value="{{ query|escape }}" size="100" autofocus>
<input class="buttonCopy button1" type="Submit" value="Search">

(Results)
{% for resp in results %}
    <tr>
        <td style="border: 1px solid">{{ resp.Question.Statement }}</td>
        <td style="width: 70%; border: 1px solid"><div id="resp{{forloop.counter}}" style="height: 200px;overflow-y:auto;overflow-x:hidden">{{ resp|escape|linebreaks }}</div></td>

        <td><button class="buttonCopybutton3",onclick="copyFunction('text{{forloop.counter}}')">Copy</button></td>
        <td><textarea id="text{{forloop.counter}}" style="display:block; width:0; height:0; opacity:0">{{ resp }}</textarea></td>
        <td>
            <label class="container">
            <input type="checkbox" id="chck" name="responseCheck" onClick="checkbox();" value="{{ resp }}"><br></br>
            <span class="checkmark"></span></label>
        </td>
        <td><textarea id="show" name="responseCheck" style="display:block; width:0px; height:0px; opacity:0"></textarea><br></br></td>
    </tr>
{% endfor %}

views.py：

if query:
    newquery = stopwords.strip_stopwords(query)
    terms = newquery.split()
    for term in terms:
         qset &= (
            Q(Question__Statement__icontains=term) |
            Q(Response__icontains=term)
         )
    results = Response.objects.filter(qset).distinct()
else:
    results = []
    posts = ''

return render_to_response("app/search.html", {
    "results": results,
    "query": query,
    "noOfResults": len(results),
    "username": username,
    "queryR": queryR,
    "topicList": topicList,
    "clientList": clientList,
})

【问题讨论】：

我认为您需要将文本中的关键字替换为诸如<span class="highlight">word</span> 之类的html代码，然后使用具有突出显示背景的css类。
@art06 我将如何继续这样做？我要替换的单词在我的 html sn-p 中 id = resp{{forloop.counter}} 的表中。我曾尝试使用 JS 替换单词，但它没有被替换。这是我的 JS atm： var t = $("#resp{{forloop.counter}}").html(); t = t.replace(/{{ query }}/g, "{{ query }}"); $("#resp{{forloop.counter}}").html(t);
看看Highlighting。顺便说一句，你检查过django's fulltext search吗？

标签： python html django highlight

【解决方案1】：

我不确定您的问题是与 python 相关还是包括使用其他技术。

但是，我建议你使用：

jQuery Highlight Plugin

基本上，您必须使用以下命令导入jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

还有highlight script，你可以在这里下载： https://johannburkard.de/resources/Johann/jquery.highlight-5.js

一旦你导入 te jquery highlight plugin，你就可以定义你需要添加行为的单词数组，使用：

$("body p").highlight(["jQuery", "highlight", "plugin"]);

【讨论】：