mark.js referrer keyword highlighting example

This fiddle demonstrates how to use julmot/mark.js to highlight referrer keywords

by Julian

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/superhero/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js"></script>
<h2><a href="https://markjs.io/" target="_blank">mark.js</a> referrer keyword highlighting example</h2>

<div class="panel panel-default">
  <div class="panel-heading">Search</div>
  <div class="panel-body">
    <div class="search row">
      <div class="col-xs-6">
        <span>Type in a referrer:</span>
        <input type="text" name="referrer" class="form-control input-sm" value="https://www.google.de/?q=lorem+ipsum">
        <span>Type in a parameter name:</span>
        <input type="text" name="parameterName" class="form-control input-sm" value="q">
        <button type="button" name="mark" class="btn btn-primary">Mark</button>
      </div>
      <div class="col-xs-6">
        <span>Search options:</span>
        <input type="checkbox" name="opt[]" value="separateWordSearch" checked> separate word search
        <br>
        <input type="checkbox" name="opt[]" value="diacritics" checked> diacritics
        <br>
        <input type="checkbox" name="opt[]" value="debug"> debug
        <br>
        <span>There are a lot more <a target="_blank" href="https://markjs.io/configurator.html">options</a>!</span>
      </div>
    </div>
  </div>
</div>


<div class="panel panel-default">
  <div class="panel-body context">
    <p>
      Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, nò sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut...

CSS

body {
  margin: 15px;
}

div.search span,
div.search input:not([type='checkbox']),
button {
  display: block;
}

div.search input:not([type='checkbox']),
button {
  margin-top: 4px;
}

div.panel {
  margin-bottom: 15px;
}

div.panel .panel-body p:last-child {
  margin-bottom: 0;
}

mark {
  padding: 0;
}

JavaScript

$(function() {

  var mark = function() {

    // Read the referrer
    // In this example it is inside the input field, in practice it is document.referrer
    var referrer = $("input[name='referrer']").val();

    // Read the parameter
    var paramKey = $("input[name='parameterName']").val();

    // Make sure there in the referrer is an parameter passed (the search query)
    if (referrer.indexOf("?") !== -1) {

      // Generate an array with all referrer parameters
      var qs = referrer.substr(referrer.indexOf('?') + 1);
      var qsa = qs.split('&');

      // Go through all referrer parameters
      var keyword = "";
      for (var i = 0; i < qsa.length; i++) {

        // Split the current parameter into key and value
        // Key will be currentParam[0] and value currentParam[1]
        var currentParam = qsa[i].split('=');

        // Make sure the parameter has a key and value
        if (currentParam.length !== 2) {
          continue;
        }

        // Check if the current parameter is the search parameter
        if (currentParam[0] == paramKey) {

          // Save the decoded URL (e.g. + needs to be converted to a blank)
          // keyword and exit the loop
          keyword = decodeURIComponent(currentParam[1].replace(/\+/g, "%20"));

        }
      }

      // Check if there is a keyword
      if (keyword != "") {

        // Determine selected options
        var options = {};
        $("input[name='opt[]']").each(function() {
          options[$(this).val()] = $(this).is(":checked");
        });

        // Mark the keyword inside the context
        $(".context").unmark({
          done: function() {
            $(".context").mark(keyword, options);
          }
        });
      }

    }

  };

  // Trigger mark action on button click
  $("button[name='mark']").on("click.mark", mark).trigger("click.mark");

});