jquery - 突出显示字符串中的单词

Question

我得到了某个字符串，我想突出显示在文本输入中键入的子字符串。

这是一个小提琴：http: //jsfiddle.net/rFGWZ/17/

只有当我输入初始字符串时，它才能正常工作，但当我输入 fe 时。15在输入中，它没有突出显示，15而是21......它总是突出显示开头的数字，所以有人可以帮我修改它，所以它会突出显示我在文本输入中键入的字符串？

Answer 1

你可以使用这个：

firstCell.html(id.replace(value, '<span class=highlight>'+value+'</span>'));

代替

firstCell.html($("<span />").addClass("highlight").text(id.slice(0, value.length)));
firstCell.append(id.slice(value.length, id.length));

演示：http: //jsfiddle.net/qgBt8/

编辑：不区分大小写的版本

Answer 2

我会使用正则表达式来解决这个问题。这也考虑了字符的大小写。

jsFiddle

$("#search").on("keyup", function() {
    var value = $(this).val();

    $("table tr").each(function(index) {
        if (index !== 0) {

            $row = $(this);
            var firstCell = $row.children("td:first");

            var id = $row.children("td:first").text();
            if (id.indexOf(value) === -1) {
                $row.children("td:first").text(id);
                $row.hide();
            }
            else {
                var re = new RegExp(value, "g"); //global replace
                firstCell.html(id.replace(re, "<span class=\"highlight\">" + value + "</span>"));//replace all instances of the characters
                $row.show();
            }
        }
    });
});​