如何使用javascript为每个单词设置不同颜色的样式？

我的代码是将整个输入转换为单色，而不是将单个颜色转换为单个单词。这是我的小提琴，其中只有红色应用于整个输入。 测试输入：hi hello等。当我清除输入字段时，最后一种颜色应用于第一个单词，但不是红色。 功能是

function func(e){
    var content = text.innerHTML;
    if( e.keyCode === 32){
      text.style.color = colors[i++];
     }
}

下面是答案：

简单的答案： 你不能；样式将仅应用于整个输入。如果要实现这一点，需要一个支持富文本编辑的控件

不幸的是，输入标记词不能有不同的颜色，因为文本和输入不是独立的元素，但对于其他元素，您可以将每个词包装到span中，并为其添加样式，这就是富内容编辑器的工作方式

假设您有

，这里有几个单词，您希望为每个单词添加不同的颜色

您可以拆分段落的innerText，为每个单词创建跨度，并将结果作为段落的innerHTML插入

下面是一个例子

var paragrapgh=document.getElementByIdparagraph； var words=paragrapgh.innerText.split；//在这里，我用空格分割单词，即标记它 变量颜色=[红色、绿色、蓝色、粉色、金色、黄色、蓝紫色]； var跨度=[]； forvar x=0；x

这里有几个词使用div您可以实现它。下面的代码几乎没有插入符号位置之类的问题

var text=document.getElementById'text'； var newWord=； 变量颜色=[红色、绿色、蓝色、深色]； var值=； var i=0； text.addEventListenerkeyup，functionevent{ funcevent }; 函数函数{ newWord=newWord+e.key； 如果e.keyCode===32{ prevValue=text.innerHTML=prevValue++newWord+； 新词=； 如果i==3{ i=0； } } } 正文{ 边框：1px纯灰； 背景色：白色； 宽度：200px； 空白：nowrap； 溢出：隐藏； }

---

可能重复@我们可以使用文本区域吗？不幸的是，不能使用普通的旧HTML控件。您需要使用第三方库，如和内联编辑。@RandikaRatnayake：不，您不需要使用第三方库，他们正在使用Content Editable.Agree执行are的答案建议的相同操作。当有现成的组件时，是否有人需要重新设计轮子：当用户在contenteditable元素中输入内容时，是否可以应用颜色？是的，您可以创建逻辑，以便它更改新文本的颜色