[Javascript] mark tagを使ってテーブル内の文字をハイライトする

上記画像の緑のフォントのやつです。単純にmarkタグを前後に入れてcssを整えれば完成。

 

    highlightKey($('input#q').val())

    function highlightKey(key){
      var valThis = key; 
      $('table').find('tr td').each(function() {
        if ($(this).attr('data-search') !== 'false') {
          var text = $(this).text();
          var textL = text.toLowerCase();
          var position = textL.indexOf(valThis.toLowerCase());

          var regex = new RegExp(valThis, 'ig');
          text = text.replace(regex, (match, $1) => {
            // Return the replacement
            return '<mark>' + match + '</mark>';
          });

          $(this).html(text);

          if (position !== -1) {
            setTimeout(function() {
              if ($(this).parent().find('mark').is(':empty')) {
                $('mark').remove();
              }
            }.bind(this), 0);
          } else {
            $(this).text(text);
          }
        }

      });
    }

Related Posts