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

Question

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

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

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

这段文字来自flask。

像这样使用 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>

给出错误 - “无法读取属性 of innerhtml null”

谁能指导一下。

谢谢，

周杰伦

Answer 1

在你收到句子的 flask 路线中，你可以用 <mark>template</mark>

替换单词 template

The HTML element represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.

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，您仍然可以将 class 添加到 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。

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

Highlight a word if a string contains that word in jinja2

javascript

css

jinja2

flask