How to make html text input where each line is a different color

Question

I'm creating a web tool that takes user input and to improve readability, I want to change each line (after \\n) to a different color.

I currently have the user input in a text area. I'm very new to doing front end stuff like this, so I'm not really sure where to start. I thought about using the below javascript that I found for output to divide up the text by each line, but I can't see how this would work for user input.

 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

 }

Ideally, I would have each line of typed input following a new line change color as the user types. For example:

"a\\n" (would appear in blue) "ab\\n" (would appear in red) "cd\\n" (would appear in green)

Answer 1

Have you considered using CSS gradients for repeating stripes? Notice I'm setting the line-height to be identical to the stripe height.

 .horizontal-stripes { border: solid 1px red; background: repeating-linear-gradient( 180deg, #fff, #fff 20px, #ccc 20px, #ccc 40px); height: 200px; width: 15em; } textarea { min-height: 10em; width: 15em; line-height: 20px; } 

 <textarea class="horizontal-stripes"></textarea>