突出显示字符串中的匹配文本（JQuery / Javascript）

我试图在任何一点上只突出显示字符串中的匹配文本。

我有一个输入框，可以过滤结果。 最初这可以很好地突出第一个字符，但是这个职责已经改变，以突出显示字符串中任何位置的文本。

小提琴： 突出显示匹配的文字

它尽可能完美地过滤 ，但突出显示从前面开始的字母，而不是匹配的字母。 我试图使用indexOf valThis来解决它，但我可能做错了。

任何帮助或指示将非常感激。

$('#box').keyup(function () { var valThis = this.value.toLowerCase(); var length = this.value.length; $('.objType').each(function () { var text = $(this).text(), textL = text.toLowerCase(), //n = textL.indexOf(valThis); var htmlR = '' + text.substr(0, length) + '' + text.substr(length); if(textL.includes(valThis)) { $(this).html(htmlR).show() } else { $(this).hide(); } }); }); 

Answer 1

这条线

 var htmlR = '' + text.substr(0, length) + '' + text.substr(length); 

说“从字符串的开头取length字符。” 你想从第一个匹配的角色开始，所以你需要知道它在哪里。 所以你想要String#indexOf ，而不是String#includes 。

您还希望保存原始文本，以便与之进行比较，而不是与上一个过滤操作更新的文本进行比较：

 // Grab the original text $(".objType").each(function() { // *** $(this).data("original", $(this).text()); // *** }) // *** $('#box').keyup(function() { var valThis = this.value.toLowerCase(); var length = this.value.length; $('.objType').each(function() { var text = $(this).data("original"), // *** textL = text.toLowerCase(), index = textL.indexOf(valThis); // *** if (index !== -1) { var htmlR = text.substr(0, index) + '' + text.substr(index, length) + '' + text.substr(index + length); // *** $(this).html(htmlR).show() } else { $(this).hide(); } }); }); 

更新的小提琴 ，片段：

 // Grab the original text $(".objType").each(function() { // *** $(this).data("original", $(this).text()); // *** }) // *** $('#box').keyup(function() { var valThis = this.value.toLowerCase(); var length = this.value.length; $('.objType').each(function() { var text = $(this).data("original"), // *** textL = text.toLowerCase(), index = textL.indexOf(valThis); // *** if (index !== -1) { var htmlR = text.substr(0, index) + '' + text.substr(index, length) + '' + text.substr(index + length); // *** $(this).html(htmlR).show() } else { $(this).hide(); } }); }); 

 input[type="text"] { width: 50%; font-size: 110%; margin: 10px; padding: 5px; float: left; clear: left; } span { float: left; clear: left; margin: 10px 10px; } 

   Accepted Event Relation Case Status Value External Data Source Navigation Link Set 

Answer 2

试试这个。 它进行非破坏性复制

 $('#box').keyup(function () { var valThis = this.value.toLowerCase(), length = this.value.length; $('.objType').each(function () { var text = $(this).text(), textL = text.toLowerCase(), textStart = textL.indexOf(valThis), textEnd = textStart+valThis.length; //n = textL.indexOf(valThis); var htmlR = text.substring(0,textStart)+'' + text.substring(textStart,textEnd) + '' + text.substring(textStart+length); if(textStart!=-1) { $("#"+this.id+"r").html(htmlR).show() $(this).hide(); } else { $("#"+this.id+"r").empty(); $(this).hide(); } }); }); 

 input[type="text"] { width: 50%; font-size: 110%; margin:10px; padding: 5px; float:left; clear:left; } span{ float:left; clear:left; margin:10px 10px; } 

   Accepted Event Relation Case Status Value External Data Source Navigation Link Set 

Answer 3

我猜你需要使用indexOf ， RegEx和substring的组合来查找并突出显示每个字符串中单词的位置。

请参阅此处的小提琴： https ： //jsfiddle.net/sxk7qj40/

 $('#box').keyup(function () { const valThis = this.value; const length = this.value.length; $('.objType').each(function () { const text = $(this).text(); const textL = text.toLowerCase(); const position = textL.indexOf(valThis.toLowerCase()); if (position !== -1) { const matches = text.substring(position, (valThis.length + position)); const regex = new RegExp(matches, 'ig'); const highlighted = text.replace(regex, `${matches}`); $(this).html(highlighted).show(); } else { $(this).text(text); $(this).hide(); } }); }); 

您不希望将substring位置硬编码为0，因为这始终始于字符串的开头，无论如何。

相反，您需要使用indexOf ，它将返回起始位置。 然后，您可以在子字符串中使用它来查找要replace的起始点。 请注意，如果未找到indexOf将返回-1 ，因此if语句。

虽然在哪里结束？ 好吧，这将作为我们已经拥有的起始位置+您刚输入的字符串长度的组合。

注意：为了方便起见，我使用了一些es2015function，如const和模板文字，但你不能使用es2015 ，只需通过Babel运行它，或者分别用var和string连接手动替换这些部分。

希望这有道理吗？

例如ES5安全：

 $('#box').keyup(function () { var valThis = this.value; var length = this.value.length; $('.objType').each(function () { 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, '' + matches + ''); $(this).html(highlighted).show(); } else { $(this).text(text); $(this).hide(); } }); });