用jQuery實時突出顯示一個或多個單詞

Question

我想用jQuery來生活突出顯示的單詞。我使用一個實時的按鍵事件來觸發突出顯示，以便突出顯示在輸入單詞時發生變化（使用輸入文本字段）

我發現了一段代碼，它工作正常，但此代碼不起作用實時關鍵事件，所以它包裝的第一個字母，並停在那裏。

這裏是我的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

的問題是，在首次成功更換模式現在必須也匹配第一個匹配的字符後已插入結束span標籤。

的HTML看起來像這樣輸入「L」後：

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

「排版」將不再因爲跨度相匹配。

與解決方案現在：

這裏是一個修復程序應該得到它做你想要的東西：

$('#' + 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");