JavaScript:如何标记字符串中的单词以不同的颜色显示，其中字符串的每个字符逐个附加到元素中？
JavaScript中可以使用HTML和CSS来标记字符串中的单词以不同的颜色显示，并将字符串的每个字符逐个附加到元素中。以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.red { color: red; }
.green { color: green; }
.blue { color: blue; }
</style>
</head>
<body>
<div id="output"></div>
<script>
function colorizeString(str) {
var words = str.split(' ');
var output = document.getElementById('output');
for (var i = 0; i < words.length; i++) {
var word = words[i];
var span = document.createElement('span');
for (var j = 0; j < word.length; j++) {
var char = document.createElement('span');
char.textContent = word[j];
if (i % 3 === 0) {
char.classList.add('red');
} else if (i % 3 === 1) {
char.classList.add('green');
} else {
char.classList.add('blue');
}
span.appendChild(char);
}
output.appendChild(span);
output.appendChild(document.createTextNode(' '));
}
}
var str = 'JavaScript is a programming language';
colorizeString(str);
</script>
</body>
</html>上述代码将字符串分割成单词，并为每个单词的字符创建一个span元素。根据单词在字符串中的位置，使用CSS类将字符标记为不同的颜色。最后，将这些span元素附加到一个具有id为output的div元素中。
这是一个简单的示例，您可以根据需要进行修改和扩展。请注意，这只是一种实现方式，您可以根据自己的需求和喜好进行调整。
相关·内容
我正在编写一个接受字符串的函数(例如"Hello World!")并将字符串的每个字符附加到HTML元素，在每个字符之间具有延迟(即，创建打字写入器效果)。我想标记字符串中的某些单词并给它上色(例如"Hello")，以便打印的每个字符都
浏览 31提问于2019-08-26得票数 0
我目前有一个名为“问题”的内容类型，它有一个纯文本字段，其中包含“货币、房屋、猪”之类的内容。我如何看待这个字符串并将每个单词转换为一个标记？我之所以这样做，是因为我从旧数据库中读取数据，并将它们的标记保存为字符串。我是在使用提要模块中读到的。
有什么不同的方法来读取标签吗？或者是否有一种方法来解析该字
浏览 0提问于2018-11-16得票数 0
我试图用AngularJS创建一个由用户生成的内容驱动的网站，它可以使用自定义标记(如[js-code]...[/js-code] )以不同的方式显示这些部分中的文本。API向我发送一个包含标记的正文文本字符串，以便在客户端上进行解析。如果我使用的是本机JavaScript或JQuery，我假设我将遍历每个字符
浏览 4提问于2016-01-06得票数 2
回答已采纳
为此，我需要更改cclabel的颜色，以使用在背景中口述文本的声音逐字更改。，并将其添加到NSArray中。在for循环中，我使用sizeWithFont逐个获取数组中字符串的文本宽度，并将其添加为CGFloat value.And。我为数组中的每个单词创建cclabel，并根据保存在CGFloat中的数组<e
浏览 0提问于2013-02-22得票数 1
回答已采纳
3回答
我需要更改元素文本中特定单词的颜色。我尝试添加和删除span标记以更改单词的样式，但之后我无法删除它。这是我试过的代码document.getElementsByClassName("label")[0].innerHTML=document.getElementsByClassName现在发生的情况是，每次调用函数时，都
浏览 3提问于2015-06-18得票数 1
回答已采纳
我一直在尝试使用CSS和Javascript在HTML中编写页面。其中一个主要功能是在单个位置(主页)生成一个大型文本文件，该文件能够对某些单词和术语进行颜色编码，以帮助用户跳转到重要的短语。这需要在运行时完成，用户可以不断地添加到日志中。(实时，当用户点击“提交”表单时。)例如，告诉Javascript
浏览 1提问于2013-01-18得票数 0
3回答
如果我有一个字符串，例如var myStr="AAAAAAA BBBBB CCCCC DDDDD..."，这个字符串可以有不同的长度，其中包含带空格的单词。我想有一个函数，它会把字符串变成一个数组，那就是字符串将被分割成数组中的元素，其中数组中的每个元素都包含字符串
浏览 2提问于2011-05-30得票数 2
回答已采纳
我想更改某些关键字的字体颜色。我试图实现的是类似于编程环境中的文本编辑器，其中某些关键字以不同的颜色显示。
例如，红色的"printf“，绿色的"scanf”，深蓝色的括号等等。请注意，我将从intent接收额外的字符串。也就是说，它不是一个固定的sentence.....
浏览 0提问于2013-07-01得票数 2
回答已采纳
1回答
在我的VB.NET应用程序中，我比较了使用IPA记录的单词，其中许多单词有许多变音符号。在其中一个比较中，我逐个字符地比较单词。但是当我遍历字符时，变音符号显示为单独的字符(正如我所预期的那样，因为这是unicode)：但是，就本程序而言，u字符与u加重音字符</e
浏览 5提问于2010-08-23得票数 2
回答已采纳
2回答
我想为内存游戏创建一个输入字段，其中每个正确的字母都显示为绿色，每个不正确的字母都显示在输入字段中。我找到了的随机<e
浏览 4提问于2016-05-20得票数 4
回答已采纳
正如问题所述，我只想在XML视图中添加多个标记。例如，假设我想设置一个字符串数组和一个独立于我的资源的字符串。我知道如何单独执行这些操作，但我想知道是否有一种将多个标记直接附加到XML代码中的视图的方法。我需要一个标记作为EditText的提示，另一个标记用于字符串数组，以填充自旋器。在整个布局中</e
浏览 2提问于2013-07-25得票数 2
1回答
我正在开发一个Chrome扩展，它可以从任何访问过的页面中提取所有单词，并将标记添加到文本中的各种单词。因此，我编写了一个迭代函数，它基本上遍历DOM元素(在树的深度优先遍历中)，并累积从 node.data 其中节点是遇到的任何文本节点；这允许我记录结果文本中的字符范围和DOM中的相应节点之
浏览 15提问于2020-09-18得票数 1
回答已采纳
3回答
获取属性字符串的颜色更改单词
、、、、
我有一个UITextView，允许通过点击来选择文本中的单词。如果被点击，则通过更改NSForegroundColor属性来突出显示单词的颜色。点击它再次取消它通过改变颜色回到文本颜色。现在，我需要知道UITextView中所有选定的单词。
第一个想法是删除所有属于特殊字符的内容，并在空间分割文本。然后检查颜色属性是否等于每个单
浏览 3提问于2017-02-01得票数 0
回答已采纳
如何在YUI DataTable中以不同的颜色显示字符串中的每个单词？
我需要“马克”的颜色是蓝色和“好”是红色。
浏览 0提问于2012-06-04得票数 0
在字符串的数组列表中是否有搜索特定字符串的快速算法？例如：{"white house","yellow house","black door","house in heaven","wife"}
想要搜索包含"house“的字符串。它应该在最短的时间内返回{"white house","yello
浏览 0提问于2014-01-14得票数 1
回答已采纳
我正在尝试更改由**字符标识的字符串($nota)中单词的字体颜色。这些单词存储在一个XML文件中。for you</nota><vocabulario id="03"></vocabulario>
上面这些<em
浏览 24提问于2020-05-24得票数 1
1回答
我试图为字符串中的不同单词设置不同的颜色，该字符串位于ExtJs网格单元格内。例如，我有一个字符串‘红蓝绿’。这三个字我需要用三种颜色。在字体颜色的javascript中，这并不难，但我不知道如何在Ext网格存储中这样做。有人能对如何做到这一点提出一些见解吗？谢谢。
浏览 2提问于2014-05-02得票数 0
回答已采纳
1回答
我正在创建我的第一个WPF应用程序，这是一个IRC聊天程序。由于我是WPF的新手，我真的不知道我应该如何显示消息，因为它们可以包含粗体、斜体单词甚至图像，或者退出消息具有除简单消息之外的其他颜色。第一种类型的解决方案是使用带有FlowDocument的RichTextBox或仅使用简单的FlowDocument，并以某种方式破解其绑定系统以显示属性的值。在一个简单
浏览 7提问于2013-12-25得票数 2
我有一个用户推测的字符串，例如“56.3foo2.1”。字符串中的每个单词或数字，比如5或6.3，可以有不同的类型。我想以尽可能高效的方式(线性时间)将这个用户输入的字符数组转换成一个元组。我不知道字符串中的单词或数字的数量，所以我不预先知道应该在元组中<e
浏览 8提问于2013-11-01得票数 0
回答已采纳
2回答
我正在解析一个XML文件，并得到一个NSMutableString形式的字符串。现在我想在我的UIView中将这个字符串显示为文本。因此，我创建了一个TextView并将其值设置为我的字符串。结果是我在TextView中显示了带有HTML标记的文本。有没有办法以<
浏览 0提问于2010-12-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
