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

Question

我正在尝试显示一个段落并想突出显示几个单词。

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

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

这一段&字来自烧瓶。

像这样使用bootstrap 显示段落 -

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

创建了一个样式 -

.highlight{
    background-color: yellow;
}

我不知道如何在本段中搜索该单词并将样式仅应用于该单词。

编辑 - 我正在像这样从数据库中获取数据。

[

    {
        "_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 null 的属性”

谁能指导一下。

谢谢，

杰

Answer 1

在收到句子的烧瓶路径中，您可以将单词 template 替换为 <mark>template</mark>

由于标记的段落在封闭上下文中的相关性或重要性，HTML 元素表示为参考或注释目的而标记或突出显示的文本。

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()

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

---

同样的方法也可以用 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。