Tweak jQuery突出显示脚本

时间:2011-11-09 15:36:43

标签: jquery

我有以下jQuery插件来突出显示字符串中的查询关键字。它当前突出显示在字符串中找到的每个查询关键字,两者都是精确的单词匹配,但如果关键字只是较长单词的一部分。

在用户键入查询的情况下,例如“我是一个人”我想避免突出显示字符串中的所有i和a。如果匹配整个单词,我该如何调整此脚本以仅突出显示少于3个字符的单词?  ID。如果突出显示标记为<b>字符串"I am a humanoid"且关键字为I am a human,则函数将输出:

"<b>I</b> <b>am</b> <b>a</b> <b>human</b>oid"

而非当前:

"<b>I</b> <b>am</b> <b>a</b> <b>human</b>o<b>i</b>d"

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

1 个答案:

答案 0 :(得分:0)

我没有修改插件,因为它属于某人,我没有检查它的权利 - 虽然它可能是免费修改。相反,我为你创建了一个函数,如果你有这种倾向,可以很容易地将它变成一个插件。

如果搜索字词为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/