jquery突出显示，多个输入不同的颜色答案

【问题标题】：jquery highlighting, multiple inputs different colorjquery突出显示，多个输入不同的颜色
【发布时间】：2013-06-04 06:58:21
【问题描述】：

我在示例页面上突出显示了插件。它的工作原理是当你输入一个单词时它会被突出显示，你可以用空格分隔它并插入另一个被突出显示的单词..

我的新问题，对我来说似乎尚未解决，例如我想要两个输入。第一个单词用一种颜色突出显示，第二个输入的单词用另一种颜色着色..

到目前为止我的情况是：http://jsfiddle.net/cfYrt/4/

html:

<body>
<input type="text" class="span1 disabled" id="field1" name="field1"><br> 

<p>
 Vestibulum rhoncus urna sed urna euismod, ut cursus eros molestie.
Nulla sed ante ut     diam gravida auctor eu quis augue. 
Donec eget diam malesuada, consectetur orci at, ultrices tellus. 
Duis id dui vel sem consequat rutrum eget non orci.
 Nullam sit amet libero odio. Vestibulum sapien sapien, 
molestie quis porta nec, sodales nec felis. 
 Mauris vehicula, erat eu consectetur viverra, 
dui tellus laoreet dolor, quis faucibus turpis eros non mi.  
</p>  
</body>

脚本：

$(function() {
$('#field1').bind('keyup change', function(ev) {
    // pull in the new value
    var searchTerm = $(this).val();

    // remove any old highlighted terms
    $('body').removeHighlight();

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

    }
});
});

css

.highlight {
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 */
}

.highlight {
padding:1px 4px;
margin:0 -4px;
}

字段 2 中输入的相应值是否可以在文本中以不同于字段 1 的颜色着色？这个插件是否可以使用它的核心代码调用class .highlight？

【问题讨论】：

标签： jquery input colors highlight

【解决方案1】：

为此，插件的可扩展性不够。但是你可以修改插件中的一些部分，稍微改变一下实现。

插件的变化：

jQuery.fn.highlight = function (pat, className) { //take the classname too

 //somecode
if (pos >= 0) {
   var spannode = document.createElement('span');
   spannode.className = className || 'highlight'; //set the classname as specified else default to 'highlight'

//somecode

jQuery.fn.removeHighlight = function (classNames) { //have it take the selectors to be removed either an array if multiple highligh selector removal or just pass in a single slector string.

 // some code

 var selectors = classNames;
 if(Object.prototype.toString.call(classNames) === '[object Array]')
  selectors = classNames.join(',');

//Some Code

return this.find(selectors).each(function () { //Apply to remove highlight wrapper

用法

 $('body').removeHighlight(['span.highlight1', 'span.highlight2']); //array of selector

或

 $('body').removeHighlight('span.highlight1');

为了突出显示，请使用classname

$('body').highlight(term, 'highlight1');

Demo

【讨论】：

我能说什么？你是我晚上和每周的英雄......伙计，我很想亲自见到这样一个伟大的人和天才：）谢谢你
@dzordz 欢迎您... :) 刚刚更新以使其更灵活。
@dzordz 就是修改了插件代码。将您的插件代码副本替换为小提琴中的副本（但保留原作者的 MIT 许可证信息）。并且您可以添加 3,4,5 选择器来删除突出显示，以防您想一次删除所有这些选择器。这里只是插件代码jsfiddle.net/gkR9n
奇怪的事情......如果有像öüä这样的字母带有这些点，为什么它会破坏单词？看起来像是某种编码问题jsfiddle.net/qbwe4
@dzordz 可能是正则表达式尝试 /(\s)/ 即 var terms = searchTerm.split(/(\s)/); 而不是 var terms = searchTerm.split(/\W+/); jsfiddle.net/HGFaX