jQuery高亮插件用特殊字符（üöä）打破一个字 [英] jQuery highlight plugin breaks a word with special characters (üöä)

问题描述

我有一个jQuery插件，在输入的单词突出显示文本中相应的值。单词也可以与空格分开。我的问题是当有一个字有特殊字符（ü，ö或ä）。当我进入dölor或faücibus时，突出显示为d lor或fa cibus。

jsfiddle： http://jsfiddle.net/qbwe4/1/

HTML

 < body> 
< input type =textclass =span1 disabledid =field1name =field1>< br> 
< input type =textclass =span1 disabledid =field2name =field2>< br> 
< p> Vestibulum rhoncus urna sed urna euismod，ut cursuserüosmolestie。 
 Nulla sed ante ut diam gravida auctor eu quis augue。 
 Donecegäetdiam malesuada，consectetur orci at，ultrices tellus。 
 Duis id dui vel semurtatrütrumeget non orci。 
 Nullam sit amet liberoodiö。 Vestibulum sapien sapien，molestie quis porta nec，
 sodales nec felis。 Mauris vehicleic，erat eu consectetur viverra，
 dui tellus laoreetdölor，quisfaücibusturpis eros non mi。< / p> 
< / body> 
  

CSS：

 code> .highlight2，.highlight1 {
 background-color：＃fff34d; 
 -moz-border-radius：5px; 
 / * FF1 + * / 
 -webkit-border-radius：5px; 
 / * Saf3-4 * / 
 border-radius：5px; 
 / * Opera 10.5，IE 9，Saf5，Chrome * / 
 -moz-box-shadow：0 1px 4px rgba（0，0，0，0.7）; 
 / * FF3.5 + * / 
 -webkit-box-shadow：0 1px 4px rgba（0，0，0，0.7）; 
 / * Saf3.0 +，Chrome * / 
 box-shadow：0 1px 4px rgba（0，0，0，0.7）; 
 / * Opera 10.5+，IE 9.0 * / 
} 
 .highlight2，.highlight1 {
 padding：1px 4px; 
 margin：0 -4px; 
} 
 .highlight2 {
 background-color：#cecece; 
} 
  

脚本：

  $（function（）{
 $（'＃field1'）。bind（'keyup change'，function（ev）{
 // pull in the new值
 var searchTerm = $（this）.val（）; 
 //删除任何旧的高亮显示项
 $（'body'）。removeHighlight（'span.highlight1'）; 
 //禁用突出显示如果空
 if（searchTerm）{
 var terms = searchTerm.split（/ \W + /）; 
 $ .each（terms，function（_，term ）{
 //突出显示新项
 term = term.trim（）; 
 if（term！=）$（'body'）。highlight（term，'highlight1' ）; 
}）; 
} 
}）; 
 $（'＃field2'）bind（'keyup change'，function（ev）{
 / /拉入新值
 var searchTerm = $（this）.val（）; 
 //删除任何旧的突出显示的项
 $（'body'）。removeHighlight（['span。 highlight2']）; 
 //禁用突出显示如果为空
 if（ searchTerm）{
 var terms = searchTerm.split（/ \W + /）; 
 $ .each（terms，function（_，term）{
 //突出显示新项
 term = term.trim（）; 
 if（term！= ）$（'body'）。highlight（term，'highlight2'）; 
}）; 
} 
}）; 
}）; 
 
 jQuery.fn.highlight = function（pat，className）{
 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 = className || '突出'; 
 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 this.each（function（）{
 innerHighlight（this，pat.toUpperCase（））; 
}）; 
}; 
 
 jQuery.fn.removeHighlight = function（classNames）{
 function newNormalize（node）{
 for（var i = 0，children = node.childNodes，nodeCount = children。 length; i< nodeCount; i ++）{
 var child = children [i]; 
 if（child.nodeType == 1）{
 newNormalize（child）; 
继续; 
} 
 if（child.nodeType！= 3）{
 continue; 
} 
 var next = child.nextSibling; 
 if（next == null || next.nodeType！= 3）{
 continue; 
} 
 var combine_text = child.nodeValue + next.nodeValue; 
 new_node = node.ownerDocument.createTextNode（combine_text）; 
 node.insertBefore（new_node，child）; 
 node.removeChild（child）; 
 node.removeChild（next）; 
 i--; 
 nodeCount--; 
} 
} 
 var selectors = classNames; 
 if（Object.prototype.toString.call（classNames）==='[object Array]'）
 selectors = classNames.join（'，'）; 
 return this.find（selectors）.each（function（）{
 var thisParent = this.parentNode; 
 thisParent.replaceChild（this.firstChild，this）; 
 newNormalize thisParent）; 
}）。end（）; 
}; 
  

我想有一些编码问题。帮助任何人？我试过一些插入jQuery编码的东西，但它没有工作...

解决方案

如果你写 searchTerm.split（/ \s + /）; inspite of searchTerm.split（/ \W + /）; 一切都可以正常运行。

这里是工作示例 http://jsfiddle.net/ 5ANZG /

\W +匹配任何非字符，\W相当于[^ a-zA-Z_0-9]，不包括unicode类别。

I have a jQuery plugin that on input of word highlights the corresponding value in text. Words can be separated with space too. My problem is when there is a word with special characters (ü,ö or ä). When I enter for example 'dölor' or 'faücibus', the highlight breaks so that it looks like 'd lor' or 'fa cibus'.

jsfiddle: http://jsfiddle.net/qbwe4/1/

HTML

<body>
  <input type="text" class="span1 disabled" id="field1" name="field1"><br>
  <input type="text" class="span1 disabled" id="field2" name="field2"><br>
  <p>Vestibulum rhoncus urna sed urna euismod, ut cursus erüos molestie.
  Nulla sed ante ut diam gravida auctor eu quis augue.
  Donec egäet diam malesuada, consectetur orci at, ultrices tellus.
  Duis id dui vel sem consequat rütrum eget non orci.
  Nullam sit amet libero odiö. Vestibulum sapien sapien, molestie quis porta nec,
  sodales nec felis. Mauris vehicula, erat eu consectetur viverra,
  dui tellus laoreet dölor, quis faücibus turpis eros non mi.</p>
</body>

CSS:

.highlight2, .highlight1 {
  background-color: #fff34d;
  -moz-border-radius: 5px;
  /* FF1+ */
  -webkit-border-radius: 5px;
  /* Saf3-4 */
  border-radius: 5px;
  /* Opera 10.5, IE 9, Saf5, Chrome */
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  /* FF3.5+ */
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  /* Saf3.0+, Chrome */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  /* Opera 10.5+, IE 9.0 */
}
.highlight2, .highlight1 {
  padding:1px 4px;
  margin:0 -4px;
}
.highlight2 {
  background-color: #cecece;
}

Script:

$(function () {
  $('#field1').bind('keyup change', function (ev) {
    // pull in the new value
    var searchTerm = $(this).val();
    // remove any old highlighted terms
    $('body').removeHighlight('span.highlight1');
    // disable highlighting if empty
    if (searchTerm) {
      var terms = searchTerm.split(/\W+/);
      $.each(terms, function (_, term) {
        // highlight the new term
        term = term.trim();
        if (term != "") $('body').highlight(term, 'highlight1');
      });
    }
  });
  $('#field2').bind('keyup change', function (ev) {
    // pull in the new value
    var searchTerm = $(this).val();
    // remove any old highlighted terms
    $('body').removeHighlight(['span.highlight2']);
    // disable highlighting if empty
    if (searchTerm) {
      var terms = searchTerm.split(/\W+/);
      $.each(terms, function (_, term) {
        // highlight the new term
        term = term.trim();
        if (term != "") $('body').highlight(term, 'highlight2');
      });
    }
  });
});

jQuery.fn.highlight = function (pat, className) {
  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 = 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());
  });
};

jQuery.fn.removeHighlight = function (classNames) {
  function newNormalize(node) {
    for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
      var child = children[i];
      if (child.nodeType == 1) {
        newNormalize(child);
        continue;
      }
      if (child.nodeType != 3) {
        continue;
      }
      var next = child.nextSibling;
      if (next == null || next.nodeType != 3) {
        continue;
      }
      var combined_text = child.nodeValue + next.nodeValue;
      new_node = node.ownerDocument.createTextNode(combined_text);
      node.insertBefore(new_node, child);
      node.removeChild(child);
      node.removeChild(next);
      i--;
      nodeCount--;
    }
  }
  var selectors = classNames;
  if(Object.prototype.toString.call(classNames) === '[object Array]')
    selectors = classNames.join(',');
  return this.find(selectors).each(function () {
    var thisParent = this.parentNode;
    thisParent.replaceChild(this.firstChild, this);
    newNormalize(thisParent);
  }).end();
};

There is some kind of encoding problem I suppose. Help anyone? I tried something with insert of jQuery encoding but it didn't work...

解决方案

If you write searchTerm.split(/\s+/); inspite of searchTerm.split(/\W+/); everything will work fine.

here is the working example http://jsfiddle.net/5ANZG/

\W+ Matches any nonword character, \W is equivalent to [^a-zA-Z_0-9] and doesn't include the unicode categories.

这篇关于jQuery高亮插件用特殊字符（üöä）打破一个字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！