Javascript 如何在每一行都是不同颜色的情况下进行html文本输入

我正在创建一个web工具，它接受用户输入并提高可读性，我想将每一行（在\n之后）更改为不同的颜色

我目前有一个文本区域中的用户输入。我对做这样的前端工作非常陌生，所以我不确定从哪里开始。我曾考虑过使用下面的javascript（我在输出中找到的javascript）将文本按每行分割，但我看不出这对用户输入有什么作用

 var lines = $("#binding-text").val().split("\n");
 for(var i = 0;i < lines.length;i++)
 {
    //code here using lines[i] which will give you each line

 }

var lines=$（“#绑定文本”）.val（）.split（“\n”）；
对于（变量i=0；i

理想情况下，我会让每一行键入的输入跟随一个新行，并随着用户键入而改变颜色。例如：

“a\n”（将以蓝色显示） “ab\n”（将显示为红色）

---

“cd\n”（将显示为绿色）

您是否考虑过使用CSS渐变来重复条纹？请注意，我正在将

行高度设置为与条纹高度相同


。水平条纹{
边框：实心1px红色；
背景：重复线性梯度（180度，#fff，#fff 20px，#ccc 20px，#ccc 40px）；
高度：200px；
宽度：15em；
}
文本区{
最小高度：10em；
宽度：15em；
线高：20px；
}
不能将文本框拆分为多种颜色，必须使用其他块元素，然后可以将其样式设置为类似于输入。您可以使用具有contenteditable属性的
div
或
p
将每一行包装为新的p或div，并以不同的颜色显示。