Question

我想在javascript或jquery中分割单词，并为“Hear（blue）”和“Us（black）”添加assign css颜色。

下面是inspect元素，因为我没有文件可以使用，所以我想使用inspect元素和id来使用inspect元素。

例如： -

$va = $("#section-56 .mid-content h1 span").text().split("");

alert($va);

如何指定“将文本视为蓝色，将我们的文本视为黑色”？

（上面的代码警告不起作用，我不知道这是否正确）。

像这样我必须得到字符串并拆分。

Answer 1

您应该按space字符进行拆分。

更改

$va = $("#section-56 .mid-content h1 span").text().split("");

要

$va = $("#section-56 .mid-content h1 span").text().split(" ");

Answer 2

检查以下代码是否有帮助。

$va = $("span").text().split(" ");
$("span").html("<span class='blue'>"+$va[0] + "</span> <span class='red'>" + $va[1]);

.red{color:red;}
.blue{color:blue}

<!DOCTYPE html>

<html>

    <head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  </head>
  <body>
  <span>Hear Us</span>
  </body>
  </html>

Answer 3

您应该按space( )拆分。所以代码应该是这样的：

＆＃13;

$(function(){
  var a = $('span').text().split(" ");
  alert(a);
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Hear Us</span>

＆＃13;

它会返回一个数组，您可以访问a[0] =听到并a[1] =我们

Answer 4

试试这个

＆＃13;

$(function(){

$va = $("#section-56 .mid-content h1 span").text().split(" ");

    $va[0] = '<span style="color:blue;">'+ $va[0] +'</span>';
    $va[1] = '<span style="color:black;">'+ $va[1] +'</span>';

    $("#section-56 .mid-content h1 span").html($va[0] + " "+ $va[1]);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<section id="section-56">
<div class="mid-content">
<h1>
<span>Hear Us</span>
</h1>
</div>
</section>

＆＃13;

Answer 5

第一个问题是将分隔符用作空字符串（＆＃34;＆＃34;）而不是空格（＆＃34;＆＃34;）

$va = $("#section-56 .mid-content h1 span").text().split(" ");

使用上面的javascript代码将两个单词作为数组获取后。您需要使用两个不同的范围构建h1标记的新内容。

var newContent = '<span class="color-blue">'+$va[0]+'</span>'+' <span class="color-black">'+$va[1]+'</span>';

$("#section-56 .mid-content h1").html(newContent);

最后，您需要更改两个单词的CSS样式

#section-56 .mid-content h1 .color-blue{color: blue;}

#section-56 .mid-content h1 .color-blue{color: black;}

或者你可以简单地在span标签中添加css属性

$va = $("#section-56 .mid-content h1 span").text().split(" ");
var newContent = '<span style="color: blue;">'+$va[0]+'</span>'+'<span style="color: black;">'+$va[1]+'</span>';

$("#section-56 .mid-content h1").html(newContent);

Answer 6

这可能不是一个确切的解决方案（超过你实际需要的解决方案），但我过去做过一些事情，以不同/随机的方式设置每个单词的样式。 http://codepen.io/Webpandit/pen/YXdXrg。

您可以从这里开始并根据您的要求进行更改。应该是一个很好的任务

＆＃13;

var pText = $('.text');
var words = pText.text().split(' ');
pText.text('');

for(var i=0; i<words.length; i++) {
  pText.append('<span class="textColor">' +words[i] + ' </span>');
}
var textColor = $('.textColor');

// arrays with property values
var colors = ['#000000', '#E843E2', '#666666', '#ff0000', '#00dd00', '#0063FF'];
var fontFamily = ['arial', 'helvetica', 'verdana', 'sans-serif'];
var fontStyle = ['italic', 'normal'];

// function to get a random Styles from the object passed in the function
var randomStyles = function(obj) {
  return obj[Math.floor(Math.random() * obj.length)];
}

// applying random styles to each word/span element
textColor.each(function(){
  $(this).css('color', randomStyles(colors));
  $(this).css('font-family', randomStyles(fontFamily));
  $(this).css('font-style', randomStyles(fontStyle));
});

＆＃13;

.text {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="text">Hello there this is a lorem ipsum text with random styles</div>

＆＃13;

已修改：根据您的要求修改此脚本后，如果您的标题文字发生变化，也可以轻松扩展到更多单词。如果你还没有让它工作，我可以在以后发布答案

＆＃13;

var pText = $('.text');
var words = pText.text().split(' ');
pText.text('');

for(var i=0; i<words.length; i++) {
  pText.append('<span class="textColor">' +words[i] + ' </span>');
}

var textColor = $('.textColor');

// array with defined colors 
var definedColors = ['blue', 'black', 'red', 'orange', 'green', 'purple', 'brown', 'pink', 'grey', 'blue', 'black'];

// applying defined colors to each word/span element
textColor.each(function(index){
  $(this).css('color', definedColors[index]);
});

＆＃13;

.text {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="text">Styling three words</div>

＆＃13;

更新：第二个片段现在可以准确地回答您的问题，＆＃34; definedColors＆＃34;数组应该至少与您造型的单词数相同（或更多）。这将按照它们在阵列中的顺序对每个单词应用颜色。不像以前的片段那样随机

我如何为每个单词填充单词并为其分配CSS颜色？

6 个答案: