Search and Highlight String

by stevenkaspar

HTML

<input type='text' id='query' value='there is another string' />
<div>
  <span id='result'></span>
</div>

CSS

input {
  width: 100%;
  box-sizing: border-box;
}

JavaScript

function findRanges (query, against, arr, indexOffset) {
	if (typeof arr === 'undefined') {
  	arr = [];
  }
	if (typeof indexOffset === 'undefined') {
  	indexOffset = 0;
  }
	var index = against.toLowerCase().indexOf(query.toLowerCase());
  
  if (index > -1) {
  	var start = index + indexOffset;
    var end = start + query.length;
  	arr.push({
      start: start,
      end: end,
    });
    findRanges(query, against.substring(index + query.length), arr, end);
  }
  
	return arr
}
function mergeRanges(ranges) {
    var result = [], last;
		
    for (var i = 0; i < ranges.length; i++) {
      if (!last || ranges[i].start > last.end) {
        result.push(last = ranges[i]);
      }
      else if (ranges[i].end > last.end) {
        last.end = ranges[i].end;
      }
    }

    return result;
}

function getHighlightedStringUsingRanges (test, ranges) {
  var highlightedString = ''
  var lastRange = null
  for (var i = ranges.length - 1; i > -1; i -= 1) {
    if (lastRange !== null) {
      highlightedString = test.substring(ranges[i].end, lastRange.start) + highlightedString
    }
    lastRange = ranges[i]
    highlightedString = '<strong>' + test.substring(lastRange.start, lastRange.end) + '</strong>' + highlightedString;
  }
  if (lastRange === null) {
    highlightedString = test
  }
  else if (lastRange.start !== 0) {
    highlightedString = test.substring(0, lastRange.start ? lastRange.start : test.length) + highlightedString;
  }
  if (ranges.length > 0 && ranges[ranges.length - 1].end < test.length) {
    highlightedString = highlightedString + test.substring(ranges[ranges.length - 1].end)
  }
  return highlightedString
}

function getQueryArrayFromString (str) {
	return str.split(' ').filter(function(str){
    return str.length > 1;
  })
}

function getIgnoreRanges(against) {
	var openingHtmlRegex = /<[a-z0-9-]+(( ([a-z]|-)+=("[^"]+"|'[^']') ?)+)?(\/)?>[^</]+<\/[a-z0-9-]+>/ig;
  console.log(openingHtmlRegex)
  var ignoreMatches =...