Javascript 使用jQuery突出显示搜索字符串

我在这里使用代码：

但是，要创建突出显示搜索功能，代码似乎将短语双重包装，如下所示：

<span class="highlight" tabindex="0"><span class="highlight" tabindex="0">Test</span></span>

测试

有人能看到我错过了什么吗？我整天都在做这件事，我想我快发疯了。提前感谢：）

调用hightlight函数的代码是：

<script>
    $( document ).ready(function() {
      $('.highlightable').removeHighlight().highlight('<?php echo $search['query'] ?>');
      <?php if ($search['query']) { ?>
      var n = $(".highlightable").find("span.highlight").length;
      if (n == 0) {
        alert('There are no search results for <?php echo $search['query'] ?>. Please try again.');
      } else {
        alert('There are ' + n + ' search results for <?php echo $search['query'] ?>. Use TAB key to move between results.');
      }
      <?php } ?>
    });
</script>

$（文档）.ready（函数（）{
$（'.highlightable'）.removeHighlight（）.highlight（''）；
var n=$（“.highlightable”）.find（“span.highlight”）.length；
如果（n==0）{
警报（'没有搜索结果。请重试'）；
}否则{
警报（'有'+n+'个搜索结果。使用TAB键在结果之间移动'）；
}
});

然后函数本身：

jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
  var skip = 0;
  if (node.nodeType == 3) {
   var pos = node.data.toUpperCase().indexOf(pat);
   pos -= (node.data.substr(0, pos).toUpperCase().length - node.data.substr(0, pos).length);
   if (pos >= 0) {
    var spannode = document.createElement('span');
    spannode.className = 'highlight';
    spannode.tabIndex = '0';
    var middlebit = node.splitText(pos);
    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.length && pat && pat.length ? this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 }) : this;
};

jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
  this.parentNode.firstChild.nodeName;
  with (this.parentNode) {
   replaceChild(this.firstChild, this);
   normalize();
  }
 }).end();
};

jQuery.fn.highlight=函数（pat）{
函数innerHighlight（节点，pat）{
var-skip=0；
if（node.nodeType==3）{
var pos=node.data.toUpperCase（）.indexOf（pat）；
pos-=（node.data.substr（0，pos.toUpperCase（）.length-node.data.substr（0，pos.length））；
如果（位置>=0）{
var spannode=document.createElement（'span'）；
spannode.className='highlight'；
spannode.tabIndex='0'；
var middlebit=node.splitText（pos）；
中间位拆分文本（页码长度）；
var middleclone=middlebit.cloneNode（true）；
spannode.appendChild（middleclone）；
middlebit.parentNode.replaceChild（spannode，middlebit）；
skip=1；
}
}
else if（node.nodeType==1&&node.childNodes&&！/（脚本样式）/i.test（node.tagName））{
对于（变量i=0；i

完成时：

<script>
    $( window ).on( "load", function() {
      $('.highlight').first().focus();
    });
</script>

$（窗口）.on（“加载”，函数（）{
$（'.highlight'）.first（）.focus（）；
});

您遇到的问题一定与您使用代码的环境有关，而不是代码本身。正如您在下面的代码段中看到的，该函数按预期工作，将匹配的单词包装一次

片段：

/*----JavaScript---*/
var div=$（“div”）；
函数突出显示（）{
突出显示部分（“预期”）；
log（div.html（））；
}
功能去高光（）{
div.removeHighlight（）；
log（div.html（））；
}

span.highlight{背景色：#FFFF77}
突出
脱光
代码按预期工作。

doh，谢谢，那么我该如何确定是什么原因造成的呢？感谢您的提问，并添加调用

突出显示

函数的脚本。问题可能就在那里的某个地方。这有帮助吗？谢谢你把我的最新消息发出去@Ben。您面临的问题不是源于您的

JavaScript

代码，而是源于您的

HTML

。非常感谢@Angel，新手犯了错误！