如果字符串在jinja2中包含该单词，则突出显示该单词

Question

我正试着展示一个段落&想突出几个单词。

例如，假设我有一个段落-- "Jinja是一个快速、有表现力、可扩展的模板引擎。模板中的特殊占位符允许编写类似Python语法的代码。然后将模板传递给数据以呈现最终文档。“

如果退出，我想突出显示单词template。

这段话是从酒瓶里来的。

使用bootstrap显示的段落如下-

<td><b>Sentence :</b> {{ data['sentence'] }}</td><br>

创造了一种风格-

.highlight{
    background-color: yellow;
}

我不知道如何在这一段中搜索这个词&只对该词应用样式。

编辑-我得到的数据从db像这样。

[

    {
        "_id":{
            "$oid":"60xxxxxxxx"
        },
        "bookName":"index.txt",
        "author":"",
        "publishDate":"",
        "lineNo":1,
        "paragraph":"Jinja is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document."
    },
    {
        "_id":{
            "$oid":"60xxxxxxxx"
        },
        "bookName":"index.txt",
        "author":"",
        "publishDate":"",
        "lineNo":1,
        "paragraph":"Jinja is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document."
    }

]

试过-

<script type="">
    document.body.innerHTML = document.body.innerHTML.replaceAll("{{word}}", "<mark>{{word}}</mark>");
    // document.body.innerHTML = document.body.innerHTML.replaceAll("{{word}}", "<mark>{{word}}</mark>");
    // document.addEventListener('DOMContentLoaded', function () {
    //     document.body.innerHTML = document.body.innerHTML.replaceAll("{{word}}", "<mark>{{word}}</mark>");
    // });
    // document.body.innerHTML = document.body.innerHTML.replaceAll("{{word}}", '<mark>'+'{{word}}'+'</mark>');
    // document.getElementById('para').innerHTML = document.getElementById('para').innerHTML.replace("{{word}}",'<mark>{{word}}</mark>');
</script>

​

​

提供错误-“无法读取innerhtml空的属性”。

有谁能指点一下。

谢谢,

杰伦

Answer 1

在你接受句子的烧瓶路线中，你可以用<mark>template</mark>代替单词<mark>template</mark>。

元素表示标记或高亮显示以供参考或标注的文本，这是由于标记段落在封闭上下文中的相关性或重要性。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark

示例：

from flask import Flask, render_template
from markupsafe import Markup

app = Flask(__name__)


@app.route("/")
def index():
    sentence = "Jinja is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document."
    data = {"sentence": Markup(sentence.replace("template", "<mark>template</mark>"))}
    return render_template("index.html", data=data)


if __name__ == "__main__":
    app.run()

如果要更改默认的mark，仍然可以将类添加到background-color标记中。

同样的方法也可以用Javascript完成：

document.body.innerHTML = document.body.innerHTML.replaceAll(
  "template",
  "<mark>template</mark>"
);

您可以将它放在模板中的一些脚本标记中。

如果DOM尚未加载且上面的内容无法运行，请尝试：

window.addEventListener("load", function () {
  document.body.innerHTML = document.body.innerHTML.replaceAll(
    "{{word}}",
    "<mark>{{word}}</mark>"
  );
});

有关此问题的更多信息，请参见this post。