joshbduncan/token_highlighter.html

## token_highlighter.html
<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>

## token_highlighter.py
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)

## token_highlighter_tldr.js
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
};
	<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>— <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>— <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>— <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>— <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>— <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
	};