如何使用javascript更改输入字段中特定选择文本的css属性

这是我的示例演示：

<span style="color: blue; text-decoration: underline;">CHANGE</span>
<form>
    <textarea >hello, world</textarea/>
</form>

更改
你好，世界

我想在输入字段中更改所选文本的颜色（所选文本将是动态的）。颜色变化可根据以下情况进行：

he：红色（如果他选择）
你好：蓝色（如果选择了你好），依此类推。
单击“更改文本”后，所选颜色将更改

使用

contenteditable='true'

而不是

textarea

试试这个：

document.getElementById（'handler'）.addEventListener（'click'，function（）{
document.getElementById（'red'）.classList.add（'red'）；
document.getElementById（'blue'）.classList.add（'blue'）；
});
.red{
颜色：红色；
}
蓝先生{
颜色：蓝色；
}
更改
你好
世界
您不能在文本区域中执行此操作。任何与文本相关的属性都会影响textarea中的整个文本

按照下面的方法，您可以为p元素动态更改文本的颜色

对您的
p
标签使用
contenteditable=“true”


函数getText（）{
if（window.getSelection）{
返回window.getSelection（）；
}else if（document.selection）{
return document.selection.createRange（）.text；
}
返回“”；
}
document.getElementById（'btnClick'）。addEventListener（'click'，function（）
{
如果（getText（）=“你好”）
document.execCommand（'foreColor'，false，“#ff0000”）
其他的
document.execCommand（'foreColor'，false，“#0000ff”）
});
改变颜色
你好，世界
按照@rayon Dabre的建议更新您的html

HTML

更改
你好，世界

JS

document.getElementById（'txt'）.addEventListener（'mouseup'，函数（e）{
var selection=（window.getSelection）？window.getSelection（）.toString（）：document.selection.createRange（）.text；
this.textContent=this.textContent；//在换行之前删除子标记
wrapWithTag（此选项？选项：“”）；
}，假）；
var textAndColor={//Object根据所选文本更新颜色
“他”：“红色”，
“你好”：“蓝色”，
“世界”：“黄色”
};
函数wrapWithTag（stringElement，TXToWrap）{
如果（！txtToWrap）{return；}
var originalTxt=stringElement.textContent；
var beforeString=originalTxt.substring（originalTxt.indexOf（txtToWrap），0；
var-AfterString=originalTxt.substring（originalTxt.indexOf（txtowrap）+txtowrap.length）；
if（textAndColor[txtToWrap]）{
stringElement.innerHTML=beforesting+“”+txtToWrap+“”+AfterString；
}
}
document.getElementById（'handler'）。addEventListener（'click'，函数（e）{
var textContainer=document.getElementById（'highlight'）；
如果（文本容器）{
textContainer.style.color=textContainer.className；
}
}，假）；
contenteditable='true'

如何？只需在每个跨距中添加一个

onclick

，即可设置。我想更改特定选择文本的颜色，这里更改文本将是颜色输入字段。特定选择文本？你这是什么意思？（1）。当我只选择hello文本时，颜色就会改变。（2） 。再次，当我在文本区域中选择另一个文本时，颜色将更改。实际上我想像HTML编辑器一样编辑文本区域值。回答问题可以替换为：many text here@RayonDabre Yeah。OP可根据其要求更改条件。主要的事情是根据文本改变颜色。哇，太棒了，我有我的主要想法。谢谢你，先生。

<span style="color: blue; text-decoration: underline;" id='handler'>CHANGE</span>
<div contenteditable='true'>
    <span id='txt'>hello, world</span>
</div>

document.getElementById('txt').addEventListener('mouseup', function(e){
    var selection = (window.getSelection) ? window.getSelection().toString() : document.selection.createRange().text;
    this.textContent = this.textContent; //remove child tags before wrap
    wrapWithTag(this, selection ? selection : "");
}, false);
var textAndColor = {//Object to update color as per selected text
    "he": "red",
    "hello": "blue",
    "world": "yellow"
};
function wrapWithTag(stringElement, txtToWrap) {
    if(!txtToWrap) {return;}
    var originalTxt = stringElement.textContent;
    var beforeString = originalTxt.substring(originalTxt.indexOf(txtToWrap), 0);
    var AfterString = originalTxt.substring(originalTxt.indexOf(txtToWrap) + txtToWrap.length);
    if(textAndColor[txtToWrap]) {
        stringElement.innerHTML = beforeString + "<span id='highlight' class=' "+ textAndColor[txtToWrap] +"'>" + txtToWrap + "</span>" + AfterString;
    }
}
document.getElementById('handler').addEventListener('click', function(e){
    var textContainer = document.getElementById('highlight');
    if(textContainer) {
        textContainer.style.color = textContainer.className;
    }
}, false);