Merge pull request #1872 from yext/hotfix/v1.17.1

Version 1.17.1

THIRD-PARTY-NOTICES

@@ -5322,7 +5322,7 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 The following NPM package may be included in this product:
 
- - readable-stream@2.3.7
+ - readable-stream@2.3.8
 
 This package contains the following license and notice below:
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/answers-search-ui",
-  "version": "1.17.0",
+  "version": "1.17.1",
   "description": "Javascript Search Programming Interface",
   "main": "dist/answers-umd.js",
   "repository": {

src/core/models/highlightedvalue.js

@@ -18,6 +18,15 @@ export default class HighlightedValue {
     return this.buildHighlightedValue(this.value, this.matchedSubstrings);
   }
 
+  /**
+   * get highlighted value elements
+   * @returns {Array<Element|string>}
+   */
+  getElements () {
+    this._sortMatchedSubstrings();
+    return this._buildHighlightedElements(this.value, this.matchedSubstrings);
+  }
+
   /**
    * get highlighted value string
    * @param {Function} transformFunction takes a string and returns the transformed string
@@ -135,6 +144,47 @@ export default class HighlightedValue {
     return highlightedValue;
   }
 
+  /**
+   * introduces highlighting to input data according to highlighting specifiers and returns a
+   * list of elements/strings
+   *
+   * @param {Object} val input object to apply highlighting to
+   * @param {Object} highlightedSubstrings highlighting specifiers to apply to input object
+   * @returns {Array<Element|string>} a list of elements/strings representing the val with
+   * highlighting applied. Example returned value :
+   *   [
+   *     'Save time & bank on your terms at over 1,800',
+   *     <strong>ATM</strong>,
+   *   ]
+   */
+  _buildHighlightedElements (val, highlightedSubstrings) {
+    const highlightedElements = [];
+    let nextStart = 0;
+
+    for (let j = 0; j < highlightedSubstrings.length; j++) {
+      const start = Number(highlightedSubstrings[j].offset);
+      const end = start + highlightedSubstrings[j].length;
+
+      if (nextStart < start) {
+        highlightedElements.push(val.slice(nextStart, start));
+      }
+
+      if (start < end) {
+        const highlightedText = document.createElement('strong');
+        highlightedText.textContent = val.slice(start, end);
+        highlightedElements.push(highlightedText);
+      }
+
+      if (j === highlightedSubstrings.length - 1 && end < val.length) {
+        highlightedElements.push(val.slice(end));
+      }
+
+      nextStart = end;
+    }
+
+    return highlightedElements;
+  }
+
   _sortMatchedSubstrings () {
     this.matchedSubstrings.sort((a, b) => {
       if (a.offset < b.offset) {