Question

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

当我键入初始字符串时，它正常工作，但是当我键入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/

编辑：case insensitive version

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();
            }
        }
    });
});

突出显示字符串中的单词

2 个答案: