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

Question

我正在尝试显示一个段落并想突出显示几个单词。
假设我有一个段落，例如 - “Jinja 是一个快速、富有表现力、可扩展的模板引擎。模板中的特殊占位符允许编写类似于 Python 语法的代码。然后模板被传递数据以呈现最终文档。”
我想突出显示单词 template如果退出。
这一段和词来自 flask 。
使用 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 null 的属性”
任何人都可以请指导。
谢谢，
周杰伦

Answer 1

在您的 flask route ，您会收到可以替换单词 template 的句子与 <mark>template</mark>

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

您仍然可以将类(class)添加到 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 .