function highlightsFromRanges(targetStr, ranges) {
      const highlights = [];
      let lastIndex = 0;
      let rangesIdx = 0;

      for (; rangesIdx < ranges.length; rangesIdx += 2) {
        const startIndex = ranges[rangesIdx];
        const endIndex = startIndex + ranges[rangesIdx + 1];
        highlights.push(targetStr.slice(lastIndex, startIndex));
        highlights.push(targetStr.slice(startIndex, endIndex));
        lastIndex = endIndex;
      }

      if (lastIndex < targetStr.length) {
        highlights.push(targetStr.slice(lastIndex));
      }

      return highlights;
    }
Returns the string parts for highlighting from the matched ranges
@example ('my example', [3, 2]) would return ['my ', 'ex', 'ample']
@param {string} targetStr - the string that was matched
@param {number[]} ranges - [idx1, len1, idx2, len2] matched ranges
@returns {string[]} - ['no match', 'match', 'no match', 'match']