-1

I am trying to highlight( or style ) the search term that a user will type. Right now this styles the entire table cell. I want just the search term highlighted and not the entire td cell.

I am showing the table rows that contain the keyword, but cannot seem to style the "searched" keyword which is jQuery('#txtSearch').val() within the results...

This is what I have

jQuery('#' + view + ' tr td:containsNoCase(\'' + jQuery('#txtSearch').val() + '\')').css( "text-decoration", "underline" );

Thx

more complete code...

if (jQuery('#txtSearch').val().length > 2) {

   jQuery('#' + view + ' tr').hide(); //  hide all rows
   jQuery('#' + view + ' tr:first').show(); // // show the header row
   jQuery('#' + view + ' tr td:containsNoCase(\'' + jQuery('#txtSearch').val() + '\')').parent().show(); // show the matching rows (using the containsNoCase)
   jQuery('#' + view + ' tr td:containsNoCase(\'' + jQuery('#txtSearch').val() + '\')').css( "text-decoration", "underline" ); // highlight searchterm

    // THIS IS THE ANSWER
    function highlightOnly(text) {
             $('#' + view + ' td').each(function (i, e) {

                var $e = $(e);
                $e.html($(e).html().split(text).join('<span class="matching">' + text + '</span>'));
             })
        }

        $('.matching').replaceWith(function () {
            return this.innerText;
        });
        highlightOnly($('#txtSearch').val().toUpperCase());
        // THIS IS THE ANSWER

   jQuery('#' + view + ' tr:nth-of-type(odd)').css('background', '#fff'); // chg bg

}
Ronald
  • 557
  • 1
  • 9
  • 26
  • Its jQuery filter, no CSS selector. https://webconnection.west-wind.com/docs/_41z11htno.htm – m1k1o Jun 12 '19 at 14:29
  • FYI. This can be achieved easily using [datatables](https://datatables.net/blog/2014-10-22) with minimal effort – User863 Jun 12 '19 at 14:29
  • Im not using datatables... – Ronald Jun 12 '19 at 14:30
  • Also [1](https://stackoverflow.com/questions/13780784/jquery-find-and-change-style-of-a-string), [2](https://stackoverflow.com/questions/20049186/substring-selector-with-jquery), [3](https://stackoverflow.com/questions/35966821/using-jquery-to-highlight-a-character-of-a-string-on-a-webpage).... – isherwood Jun 12 '19 at 14:37

3 Answers3

0

Here is a pseudo code of how to do it:

const searchedText = ...;
const foundCell = ...;
const updatedText = `<span class="HIGHLIGHT">${searchedText}</span>`
const newText = foundCell.text().replace(RegExp(searchedText, "gi"), updatedText);
foundCell.html(newText);
Mykybo
  • 1,429
  • 1
  • 12
  • 24
0

You can highlight a particular word in a element like the following

JS

function hiliter(word, element) {
    var rgxp = new RegExp(word, 'g');
    var repl = '<span class="highlight">' + word + '</span>';
    element.innerHTML = element.innerHTML.replace(rgxp, repl);
}
elem = //your element
hiliter(jQuery('#txtSearch').val(),elem );

CSS

.highlight{
  text-decoration : underline
}
Syed mohamed aladeen
  • 6,507
  • 4
  • 32
  • 59
0

Try using :containsNoCase

Example

jQuery.expr[':'].containsNoCase = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
    .indexOf(m[3].toUpperCase()) >= 0;
};

let term = 'john'

$("div:containsNoCase('" + term + "')")
  .html(function() {
      return this.innerText.replace(
        new RegExp(term + '(?!([^<]+)?<)', "gi"),
        '<mark>$&</mark>')
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom john Sinclair</div>
<div>J. Ohn</div>
User863
  • 19,346
  • 2
  • 17
  • 41