Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Highlighting Flask Search Tokens With Javascript
<html>
<head>
<title>Flask Search Token Highlighter Javascript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<style>
.quote-list {max-width: 42em; padding-top: 3em;}
</style>
</head>
<body>
<div class="quote-list mx-auto">
<h1 class="pb-3">List of Quotes</h1>
<h4>Highlighting flask search tokens with Javascript</h4>
<hr>
<div id="article">
<p><blockquote>I’m a real believer that life is lived in chapters. If you don’t turn the page, you’re never going to figure out what comes next.</blockquote></p>
<p>&mdash; <cite>Casey Neistat</cite></p>
<hr>
</div>
<div id="article">
<p><blockquote>EVERYONE *wants* someone in their life to make great social experiences, and in lot of networks / groups / circles / communities that job is wide open for the taking.</blockquote></p>
<p>&mdash; <cite>Nick Gray</cite></p>
<hr>
</div>
<div id="article">
<p><blockquote>For every chapter of your life you long to relive, you have not done enough with your life in the present.</blockquote></p>
<p>&mdash; <cite>Neil deGrasse Tyson</cite></p>
<hr>
</div>
<div id="article">
<p><blockquote>Only two ways to live life, either in the pursuit of gain or to avoid loss.</blockquote></p>
<p>&mdash; <cite>Unknown</cite></p>
<hr>
</div>
<div id="article">
<p><blockquote>Don’t live the same year 75 times and call it a life.</blockquote></p>
<p>&mdash; <cite>Robin Sharma</cite></p>
<hr>
</div>
</div>
<!-- SEARCH TOKEN HIGHLIGHTER SCRIPT -->
<script>
// remove html encoding from the flask search tokens
// hat tip to Rob Wu on StackOverflow
// https://stackoverflow.com/questions/7394748/whats-the-right-way-to-decode-a-string-that-has-special-html-entities-in-it/7394787#7394787
var decodeHTML = function (html) {
var txt = document.createElement('textarea');
txt.innerHTML = html;
return txt.value;
};
// grab all search query tokens from flask
var tokens = "{{ query| replace(' ', '|')}}"; // add regex '|' "or" character
var tokens = decodeHTML(tokens); // remove html encoding mess from tokens using function above
var re_quotes = new RegExp(tokens, "gi"); // setup regex to find all matching tokens
var quotes = document.querySelectorAll("[id=article]"); // find all articles/quotes on the page
// loop through all found articles elements (quotes)
for (var i = 0; i < quotes.length; i++) {
var content = quotes[i].innerHTML; // grab the article quote content
content.match(re_quotes).forEach(function (match, i) { // loop over the all token matches in content
var re_matches = new RegExp(match + "\\b", "gi"); // replace regex for all whole word token matches
content = content.replace(re_matches, '<mark>' + match + '</mark>'); // actually replace all token matches
});
quotes[i].innerHTML = content; // set the innerHTML of the article to the update content
};
</script>
</body>
</html>
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
query = "life social page pursuit"
return render_template('token_highlighter.html', query=query)
var query = "life social page pursuit"; // the query of tokens to highlight
var tokens = query.replace(/ /g, "|"); // add regex '|' "or" character
var match_tokens = new RegExp(tokens, "gi"); // regex to find all matching tokens
var articles = document.querySelectorAll("[id=article]"); // find all articles on the page
for (var i = 0; i < articles.length; i++) { // loop through all found articles elements (articles)
var content = articles[i].innerHTML; // grab the article quote content
content.match(match_tokens).forEach(function (match, i) { // loop over the all token matches in content
var replace_tokens = new RegExp(match + "\\b", "gi"); // replace regex for all whole word token matches
content = content.replace(replace_tokens, '<mark>' + match + '</mark>'); // actually replace all token matches in content variable
});
articles[i].innerHTML = content; // set the innerHTML of the article to the update content
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment