CODEWITHSUNDEEP
javascriptcssflaskjinja2
Jay Prakash Thakur
Jay Prakash Thakur

Reputation: 615

Highlight a word if a string contains that word in jinja2

I am trying to display a paragraph & want to highlight few words.

Let's suppose i have a paragraph, For example - "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."

I want to highlight word template if exits.

this paragraph & word is coming from flask.

displaying paragraph using bootstrap like this -

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

created a style -

.highlight{
    background-color: yellow;
}

I am not getting how to search that word in this paragraph & apply style to that word only.

Edit - I am getting data from db like this.

[

    {
        "_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."
    }

]

Tried-

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

enter image description here

gives error - "can not read property of innerhtml null"

Could anyone please guide.

Thanks,

Jay

Upvotes: 2

Views: 1450

Answers (1)

bas
bas

Reputation: 15462

Inside your flask route where you receive the sentence you could replace the word template with <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

Example:

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

You can still add the class to the mark tag if you want to change the default background-color.

The same approach can also be done with Javascript:

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

You could put this somewhere inside some script tags in the template.

In case the DOM hasn't loaded yet and the above doesn't work try:

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

For more info on this, see this post.

Upvotes: 2

Related Questions