使用 jQuery 实时突出显示单词

Question

我想用 jQuery 来突出显示单词。我使用实时 keyup 事件来触发突出显示，以便突出显示在输入单词时发生变化（为此使用输入文本字段）

我找到了一段可以正常工作的代码，但此代码不适用于实时 keyup 事件，因此它会包裹第一个字母并停在那里。

这是我的 HTML：

<input type="text" id="input" name="input"/>
<div id="content-block"><p>lorem ip sum </p></div>

这是我的 JS：

$('#input').live('keyup', function() {
    $('#input').trigger('highLight');
});

$('#input').bind('highLight', function() {
    var o = {words:$('input[name="input"]').val()};
    highlight("content-block",  o);
});

function highlight(id, options) {

    var o = {
                words: '',
                caseSensitive: false,
                wordsOnly: true,
                template: '$1<span class="highlight">$2</span>$3'
            }, 
        pattern;

    $.extend(true, o, options || {});

    if (o.words.length == 0) { return; }
    pattern = new RegExp('(>[^<.]*)(' + o.words + ')([^<.]*)', o.caseSensitive ? "" : "ig");

    $('#'+id).each(function() {

        var content = $(this).html();

        if (!content) return;
        $(this).html(content.replace(pattern, o.template));

    });

}

Answer 1

问题是，在第一次成功替换之后，模式现在还必须匹配在第一个匹配字符之后插入的结束范围标记。

输入“l”后，HTML 看起来像这样：

<p><span class="highlight">l</span>orem ip sum</p>

由于跨度，“lorem”将不再匹配。

现在有了解决方案：

这是一个修复程序，应该可以让它执行您想要的操作：

$('#' + id).each(function() {
    $('span.highlight',this).replaceWith($('span.highlight',this).text()); // Fix

    var content = $(this).html();

    if (!content) return;
    $(this).html(content.replace(pattern, o.template));
});

假设您只有一个突出显示范围，下面的行将删除该范围并将其替换为它包含的文本。然后替换就会正常进行。

$('span.highlight',this).replaceWith($('span.highlight',this).text()

一个工作示例在这里： http://jsfiddle.net/ryanrolds/N4DCR/

Answer 2

即使您处于区分大小写的模式，您也应该为正则表达式指定全局标志。这可能就是为什么只有第一个字符被替换的原因。尝试使用这个：

pattern = new RegExp('(>[^<.]*)(' + o.words + ')([^<.]*)', (o.caseSensitive ? "" : "i") + "g");