Splunk - Javascript with XML

Question

I have developed the dashboard using xml coding. In XML, i have referenced the javascript.

XML: I am passing the word input from the field as highlighttoken.

Javascript: I am getting the word and processing the search in all the tables refereed in XML.I can able to search single word. But i want to search as multiple word string with comma separated. Please find the below coding and help me with the javascript.

Example: If i search the keyword as "Splunk" it will highlight but if i search as "Splunk,web,access" it will not display anything.

XML:

<form script="highlightToken.js">
  <label>Highlight_text</label>
  <fieldset>
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>-5m@m</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="text" token="highlightToken" searchWhenChanged="true">
      <label>Search Word</label>
      <default>splunk*</default>
      <initialValue>searchword</initialValue>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>$highlightToken$</title>
      <table id="highlightTable1">
        <search id="highlightSearch1">
          <query>index=_internal
| stats count by sourcetype</query>

          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>

        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel>
      <table id="highlightTable2">
        <search id="highlightSearch2">
          <query>index=_internal 
| stats count by sourcetype
| head 5</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="highlightTable3">
        <search id="highlightSearch3">
          <query>index=_internal 
| stats count by sourcetype
| head 5</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel>
      <table id="highlightTable4">
        <search id="highlightSearch4">
          <query>index=_internal sourcetype="splunkd"
| stats count by sourcetype
| head 5</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="highlightTable5">
        <search id="highlightSearch5">
          <query>index=_internal 
| stats count by sourcetype
| head 5</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</form>

Javascript|:

require([
    "underscore",
    "jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/tableview",
    "splunkjs/mvc/simplexml/ready!"
], function (_, $, mvc, SearchManager, TableView) {
    var defaultTokenModel = mvc.Components.get("default");
    // var strHighlightText = ""
    var strHighlightText = defaultTokenModel.get("highlightToken");
    var customCellRenderer = TableView.BaseCellRenderer.extend({
        canRender: function (cell) {
            return cell.field !== "_time";
        },
        render: function ($td, cell) {
            var strText = cell.value;
            if (strHighlightText !== "*" && strHighlightText !== "") {
                var regEx = new RegExp(strHighlightText, "gi");
                strText = strText.replace(regEx, '<b style="background:#4dff4d;">$&</b>');
            }
            $td.addClass('string').html(_.template(strText));
        }
    });
    function highlightTable() {
        var maxCount = 6;
        for (i = 0; i < maxCount; i++) {
            var tableItem = mvc.Components.get("highlightTable" + i);
            if (typeof (strHighlightText) !== "undefined" && typeof (tableItem) !== "undefined") {
                var search = mvc.Components.get("highlightSearch" + i);
                if (search !== undefined) {
                    console.log("highlightSearch:", i)
                    search.startSearch();
                }
                console.log("highlightToken:", strHighlightText, " tableId:", i)
                tableItem.getVisualization(function (tableView) {
                    tableView.addCellRenderer(new customCellRenderer());
                });
            }
        }
    }
    defaultTokenModel.on("change:highlightToken", function (model, value, options) {
        if (typeof (value) !== "undefined" || value !== "$value$") {
            strHighlightText = value;
            highlightTable();
        }
    });
    highlightTable();
});

Answer 1

You're using regular expressions in your JavaScript to match the highlighted text, so you could put (Splunk)|(web)|(access) to match multiple phrases.

Alternatively, if you really want to go with comma separated, you'll need to modify the following section of code. You'll need to first split strHighlightText at the commas, then loop over the following code with each split word

var regEx = new RegExp(strHighlightText, "gi");
strText = strText.replace(regEx, '<b style="background:#4dff4d;">$&</b>');