Highlight specific string in JSON formatted events

[gustavlundberg]

Hello,

I have a dashboard where I am displaying events which are JSON formatted (a requirement not to have them in raw format) and I need certain keywords to be highlighted. Since it is JSON formatted, I cannot simply use Splunk's highlight function. Instead I have tried to use JavaScipt and CSS.

I can get it to work using online editors like jsfiddle.net, where I just copy paste my .js and .css-files together with the html file I download from my dashboard. Everything works fine.

However, when I upload the .js and .css-files to \Splunk\etc\apps\search\appserver\static, the highlighting works e.g. in the title to my panel, but it does not highlight the keywords in the JSON formatted events displayed which I also need. See image and code (Note: the image doesn't include the real JSON data that I'm going to be using it for later. The keyword 'gustav' is something that should be highlighted in the events but is not).

Does anyone have any idea what is causing this or how it could be fixed?

The code I'm using is the following:

.js-file:

function highlight(elem, keywords, cls = 'highlight') {
  const flags = 'gi';
  // Sort longer matches first to avoid
  // highlighting keywords within keywords.
  keywords.sort((a, b) => b.length - a.length);
  Array.from(elem.childNodes).forEach(child => {
    const keywordRegex = RegExp(keywords.join('|'), flags);
    if (child.nodeType !== 3) { // not a text node
      highlight(child, keywords, cls);
    } else if (keywordRegex.test(child.textContent)) {
      const frag = document.createDocumentFragment();
      let lastIdx = 0;
      child.textContent.replace(keywordRegex, (match, idx) => {
        const part = document.createTextNode(child.textContent.slice(lastIdx, idx));
        const highlighted = document.createElement('span');
        highlighted.textContent = match;
        highlighted.classList.add(cls);
        frag.appendChild(part);
        frag.appendChild(highlighted);
        lastIdx = idx + match.length;
      });
      const end = document.createTextNode(child.textContent.slice(lastIdx));
      frag.appendChild(end);
      child.parentNode.replaceChild(frag, child);
    }
  });
}

var myElement = document.getElementById("events_highlighted");
// Used document.body instead of the value of myElement
highlight(document.body, ['is', 'Robotics', 'Top', 'gustav', 'failed', 'success', 'info', 'error', 'event', 'res']);

.css-file:

.highlight {
background: lightpink;
}

[niketn]

@gustavlundberg the reason why JS and CSS overrides are not working for you is because JS needs to be applied only after table render and table might not have been rendered when you jQuery is invoked.

Please refer to one of my older answers with a run anywhere example on the similar lines where the text selected in the text box can be highlighted in the table: https://answers.splunk.com/answers/636948/how-to-add-css-class-to-table-field-by-input-in-sp.html

Also on a different note if you want to show formatted JSON in table you can create Table extension through JS which will show prettified JSON using Event View in Splunk Refer to one of my older answer for the same: https://answers.splunk.com/answers/587044/can-i-custom-code-a-splunk-table-to-include-json-i-1.html

[gustavlundberg]

Thanks for the answer.

However, I saw your solution and noticed that that highlighting also affects the search results. Referring to your image above, if you want to highlight the word "sample", I would want it to still show the results not containing that word.

Furthermore, preferably the splunk search should not run again if you change the words to highlight (words to be highlight should eventually be set using tokens).

Do you have any more ideas on this?