Question

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

在用户键入查询的情况下，例如“我是一个人”我想避免突出显示字符串中的所有i和a。如果匹配整个单词，我该如何调整此脚本以仅突出显示少于3个字符的单词？ ID。如果突出显示标记为字符串"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());
 });
};

Answer 1

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

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

Tweak jQuery突出显示脚本

1 个答案: