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

Question

我一直在尝试对 jQuery 中的每个单词进行恶意处理并给它们一个彩色背景，我找到了一个解决方案，但它只适用于 html 内容，我想为输入着色搜索栏。这是我发现的例子

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

事实上，它不能与文本输入元素一起使用，因为此函数获取 content 以将其包含在 span 元素中，并且不是元素的值。

但我已经修复了它，使其适用于您的代码，在 background input 元素上应用随机 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>'
      }));
    }
});

编辑

要为输入的每个单词着色，有点棘手，我不知道是否有 "clean" 方法可以做到这一点。

无论如何，这是我对这部分的建议

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

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

Change background-color of each word in search bar

html

css

search

jquery

highlight