Question

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

我找到了一段工作正常的代码，但是这段代码不适用于live 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

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

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

live用jQuery突出显示一个单词

2 个答案: