調整jQuery高亮腳本

我得到以下jQuery插件來突出顯示字符串中的查詢關鍵字。它會突出顯示在字符串中找到的每個查詢關鍵字，包括確切的單詞匹配，而且如果關鍵字只是長單詞的一部分。調整jQuery高亮腳本

在用戶鍵入查詢的情況下，例如「我是一個人」我想盡量避免突出所有我和a的字符串。如果匹配整個單詞，我如何調整此腳本以僅突出顯示少於3個字符的單詞？ I.d.如果高亮標記爲字符串"I am a humanoid"和關鍵字I am a human功能將輸出：

"I am a humanoid"

，而不是目前：

"I am a humanoid"

jQuery.fn.highlight = function(pat) { 
function innerHighlight(node, pat) { 
    var skip = 0; 
    if (node.nodeType == 3) { 
    var pos = node.data.toUpperCase().indexOf(pat); 
    if (pos >= 0) { 
    var spannode = document.createElement('span'); 
    spannode.className = 'highlight'; 
    var middlebit = node.splitText(pos); 
    var endbit = middlebit.splitText(pat.length); 
    var middleclone = middlebit.cloneNode(true); 
    spannode.appendChild(middleclone); 
    middlebit.parentNode.replaceChild(spannode, middlebit); 
    skip = 1; 
    } 
    } 
    else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) { 
    for (var i = 0; i < node.childNodes.length; ++i) { 
    i += innerHighlight(node.childNodes[i], pat); 
    } 
    } 
    return skip; 
} 
return this.each(function() { 
    innerHighlight(this, pat.toUpperCase()); 
}); 
};

來源

2011-11-09 Joseph

我還沒有修訂插件，因爲它屬於某人，我沒有檢查它的權利 - 雖然它可能是免費修改的。相反，我爲你創建了一個函數，如果你有傾向，它很容易變成插件。

如果搜索詞爲3個字符或更少，它只會突出顯示一個匹配的詞。否則，它會突出顯示單詞的任何部分。

function highlight(original, searchterms) { 
    var terms = searchterms.split(" "); 
    var output = original; 

    for (var i = 0; i < terms.length; i++) { 
     var term = terms[i]; 
     if (term.length <= 3) { 
      // replace whole word only 
      var re = new RegExp("\\b" + term + "\\b", "gi"); 
      output = output.replace(re, "<span class=\"highlight\">" + term + "</span>"); 
     } 
     else { 
      // replace any part of word 
      var re = new RegExp(term, "gi"); 
      output = output.replace(re , "<span class=\"highlight\">" + term + "</span>"); 
     } 
    } 

    return output; 
}

這裏是展示它撥弄了幾個演示的工作：http://jsfiddle.net/XNMzg/2/

來源

2011-11-09 16:09:22

調整jQuery高亮腳本

回答

相關問題