jQuery фильтр и таблица подсветки - PullRequest
Новая
       23

jQuery фильтр и таблица подсветки

0 голосов
/ 06 апреля 2020

У меня проблемы с моим кодом. При поиске я пытаюсь найти букву или слово и выделить его, но возникают некоторые проблемы, например, когда я ищу слово «Арам», оно возвращает мне «Арам». Когда в слове у меня больше одной и той же буквы, и первая - заглавная, все остальные буквы заменяются заглавными Можете ли вы проверить мой код и сказать, что я делаю неправильно. 

example 'Aram' -> 'ArAm(<mark>A</mark>r<mark>A</mark>m)' but shuld be 'Aram(<mark>A</mark>r<mark>a</mark>m)'

JavaScript: 

$("input").on("keyup", function () {
    var valThis = this.value;


    $('table').find('tr td').each(function () {
        if($(this).attr('data-search') !== 'false') {
            console.log('');


            var text = $(this).text();
            var textL = text.toLowerCase();
            var position = textL.indexOf(valThis.toLowerCase());

            if (position !== -1) {
                var matches = text.substring(position, ( valThis.length + position ));

                var regex = new RegExp(matches, 'ig');

                var highlighted = text.replace(regex, `<mark>${matches}</mark>`);

                console.log(highlighted);

                $(this).html(highlighted);

                setTimeout(function () {
                    if($(this).parent().find('mark').is(':empty')) {
                        $('mark').remove();
                    }
                }.bind(this),0);
            } else {
                console.log('sadasdasd');
                $(this).text(text);
            }
        }

        if($(this).parent().find('mark').length > 0) {
            $(this).parent().show();
        }else {
            $(this).parent().hide();
        }
    });
});

Вот мой jsFiddle

Спасибо за вашу помощь

1 Ответ

1 голос
/ 07 апреля 2020

Попробуйте это: 

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

$(this).html(text);

JSFiddle

...