JS高亮文本字符串

Posted 2023-03-06

【中文标题】JS高亮文本字符串

【英文标题】：JS Highlighting Of Text Strings

【发布时间】：2012-12-06 21:07:28

【问题描述】：

使用一个小插件来突出显示表单中输入字段中的文本字符串。

javascript text higlighting jQuery plugin

我稍微修改了代码，允许用户通过用逗号分隔多个字符串来将多个字符串添加到输入字段中，这将突出显示多个关键字。

这在这种情况下效果很好：stack,overflow,js

但是，如果我输入 stack,overflow,js，（注意最后一个字符串之后的 , ）它会挂起浏览器并变得无响应。

我使用的代码是：

$(function()  
    if ( $("input#searchterm").val().length > 0 ) 
        $("input#searchterm").addClass('marked-purple');
        var arrayOfKeyWords= $("input#searchterm").val().split(',');
        for (var i=0;i<arrayOfKeyWords.length;i++) 
            $('.message p.messagecontent').highlight(arrayOfKeyWords[i]);
        
               
);

如果用户添加了最后一个逗号，是否有人知道如何忽略它？

提前致谢

【参考方案1】：

你可以在调用highlight()之前做一个空值检查，像这样：

if ($("#searchterm").val().length > 0) 
    $("#searchterm").addClass('marked-purple');
    var arrayOfKeyWords = $("#searchterm").val().split(',');
    for (var i = 0; i < arrayOfKeyWords.length; i++) 
        if (arrayOfKeyWords[i] !== "")  // ensure there is a value to highlight
            $('.message p.messagecontent').highlight(arrayOfKeyWords[i]);
        
    

如果有的话，您也可以去掉尾随逗号。

if ($("#searchterm").val().length > 0) 
    $("#searchterm").addClass('marked-purple');
    var arrayOfKeyWords = $("#searchterm").val().replace(/,+$/, '').split(',');
    for (var i = 0; i < arrayOfKeyWords.length; i++) 
        $('.message p.messagecontent').highlight(arrayOfKeyWords[i]);
    

【讨论】：

@DaveHenderson 没问题，很高兴为您提供帮助 :)

【参考方案2】：

这就是删除字符串最后一个逗号的方法：

var str = "stack,overflow,js,"; 
if(str.charAt( str.length-1 ) == ",") 
  str = str.slice(0, -1);

【讨论】：

问题是如何忽略最后一个逗号！