I am using the following code inside my click handler (shown in JSFiddle below) to replace a text when a user clicks on a cell value:
var value = event.args.value;
var color = "#FF0000";
var highlighted = text.replace(
' ' + value + ' ',
"<span style='color:" + color + ";'</span> "
var text = panel.html();
var text = panel.text();
You are missing the closing
> on your span tag, and you are omitting the
value that you obtained from
var value = event.args.value; so the word goes missing.
var highlighted = text.replace( ' ' + value + ' ', ' <span style="color:' + color + ';">' + value + '</span> ' // ^ ^^^^^
Note I also changed the quote characters used so the HTML can have the double-quotes
Try the updated fiddle I created, changing only that line, and you will see the word you click on get highlighted.
That said, it is generally better to avoid inline styles like
color="#FF0000" and use classes and CSS styles for them instead. You could instead have simpler code that doesn't have to work the var
color into it:
var highlighted = text.replace( ' ' + value + ' ', ' <span class="selected">' + value + '</span> '
Your CSS would have a rule