Question

我有一个搜索框，允许用户输入要在其上搜索网格的值。如果有任何匹配项，则无论用户在搜索框中输入的内容是什么，都应在网格上突出显示。我用来尝试实现此目标的代码如下：

const searchTerms = searchTerm.trim().split(' ').filter((item) => item !== '');
let result = rawGridRecord;
           searchTerms.forEach((val) => {
           const reText = new RegExp(val, 'gi');
           result = result.replace(reText, '<span class="text-highlight">$&</span>');
           });

我目前遇到的问题是，如果有多个搜索词，它将开始与'<span class="text-highlight">$&</span>'字符串现在匹配的result匹配。这会导致我们不想要的行为。 html开始在网格中显示为字符串。

如何实现此功能，以便可以正确突出显示所有searchTerm而不造成问题。

Answer 1

    const searchTerms = searchTerm.replace('*', '').trim().split(' ').filter((item) => item !== '');
const searchString = '(' + searchTerms.join('|') + ')';


let result = newName;

if (result) {
    const reText = new RegExp(new RegExp(searchString), 'gi');
    result = result.replace(reText, '<span class="text-highlight">$&</span>');
}

对此进行了尝试，现在看来效果更好。不知道这有多充分的证据。

根据搜索字词突出显示网格行

1 个答案: