更改搜索栏中每个单词的背景颜色

Question

我一直在试图抛出jQuery中的每个单词并给它们一个彩色背景，我找到了一个解决方案，但它只适用于html内容，我想为输入着色为搜索栏。而本作什么的examble我发现

HTML

some content 
<div>another content 
    <input id="search" type="text" value="dsfdsfdsf sdf dsfsdfsfs"> 
</div> 
<p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac turpis 
</p> 
content in body 

jQuery的

//the main point here is you need to replace only the contents of the text node, not all the html parts 

var colours = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'gray']; 
var lastC; 

jQuery('*').contents().each(function() { 
    //not a text node or there is no content to replace 
    if (this.nodeType != 3 || !this.nodeValue.trim()) { 
     return; 
    } 

    //replace the value of the text node 
    $(this).replaceWith(this.nodeValue.replace(/\w+/g, function (part) { 
     var c = colours[Math.floor(Math.random() * colours.length)]; 
     while (c == lastC) { 
      var c = colours[Math.floor(Math.random() * colours.length)]; 
     } 
     lastC = c; 
     return '<span style="background-color: '+c+';">' + part.split("").join("") + '</span>' 
    })) 
}); 

我试图改变jQuery('*')到jQuery('#search')，但没有奏效。

活生生的例子 https://jsfiddle.net/7hs9mgLp/2/

我应该这样做修复它？

Answer 1

事实上，它不能与文本输入元素的作品，因为这个功能得到内容到englobe它在跨度元素而不是元素的值。

但我已经做了一个修复，使其适用于您的代码，并在backgroundinput元素上应用随机color。

You can see it here

这里的JS代码：

//the main point here is you need to replace only the contents of the text node, not all the html parts 

var colours = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'gray']; 
var lastC; 

jQuery('*').contents().each(function() { 
    //not a text node or there is no content to replace 
    // here is the part I've changed. I test what is the element we get 
    if ($(this).is("input")) { 
     color = colours[Math.floor(Math.random() * colours.length)]; 
     $(this).css('background-color',color); 
    } 
    else{ 
     if (this.nodeType != 3 || !this.nodeValue.trim()) { 
      return; 
     } 

     //replace the value of the text node 
     $(this).replaceWith(this.nodeValue.replace(/\w+/g, function (part) { 
      var c = colours[Math.floor(Math.random() * colours.length)]; 
      while (c == lastC) { 
       var c = colours[Math.floor(Math.random() * colours.length)]; 
      } 
      lastC = c; 
      return '<span style="background-color: '+c+';">' + part.split("").join("") + '</span>' 
     })); 
    } 
}); 

编辑

要在输入颜色的每个字，它是一种棘手的，我不知道是否有一个“干净“的方式来做到这一点。

不管怎么说，这是我的建议，这部分

See this updated fiddle

我改变一点点的HTML结构要做到这一点，因为我想不出其他的办法做到这一点。希望能帮助到你。

这里的更新JS部分：

if ($(this).is("input")) { 
    val = $(this).val().split(" "); 
    $(val).each(function(i,v) { 
    color = colours[Math.floor(Math.random() * colours.length)]; 
    $("label").append("<span class='absolute' style='background-color: "+color+"; '>"+v+"</span>"); 
    $('#search').css('position','relative'); 
    $(this).val(''); 
    $('label').css({'position' : 'absolute', 'left' : '2px', 'top' : '2px' }); 
    }); 
}