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;
}
... View more