如何根據查詢從搜索結果中突出顯示單詞？

Question

我希望我用來搜索結果的單詞在結果中突出顯示。 我將如何進行呢？

我看過使用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,
})

Answer 1

我不確定您的問題是使用python還是包含使用其他技術。

但是，我建議您使用：

jQuery Highlight插件

基本上，您必須使用以下命令導入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

並且，一旦導入了jquery highlight plugin ，您就可以定義添加行為的單詞數組，方法是：

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