Reputation: 615
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>
gives error - "can not read property of innerhtml null"
Could anyone please guide.
Thanks,
Jay
Upvotes: 2
Views: 1450
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