How to make specific number of characters change color?

Question

I'm making a Karuta web game. In karuta, there are "kimariji", which are the minimum amount of "letters" needed to know which card to take. These counts will be stored in the API/JSON I've created, which get saved as a state and read from.

I'm looking to do this: (english example)

var kimarijiCount = 6
string = 'Elephant'
in this case, only 'Elepha' turns red.

var kimarijiCount = 2
string = 'Rhino'
in this case, only 'Rh' turns red.

How can I do this using javascript/react? I'm assuming my pseudocode would be:

//get string
//get count variable x
//set css for the first x chars to a different colour 

This is how my code for creating the cards current looks, if it helps

    render() {      
if (this.props.displayType === "kanji") {
        return (
            <div id="CardContainer" className="cardContainer">
                {this.props.cards.slice(0, this.props.number).map((cards, index) => (
                    <div id="card" className="cardOuter" onClick={() => this.props.handleComp(index)}>
                        <div className="cardInner">
                            <p key={index}>{cards.back}</p>
                        </div>
                    </div>
                ))}

            </div>)
    }

Answer 1

Here's a sandbox that should work for the example you gave!

In short, you probably want to use slice on your kimariji:

// Slice the first `kimarjiCount` characters of kimarji and make them red
<span color={{ color: "red" }}>{kimarji?.slice(0, kimarjiCount)}</span>

// Append the rest of the kimarji
<span>{kimarji?.slice(kimarjiCount, kimarji.length)}</span>

This uses the optional chaining operator to ensure that the kimarji variable exists before calling slice on it.