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>)
    }

I think pseudocode would be a bit more like: 1) Split string at index, 2) wrap each substring in span, 3) color each span the color desired. — Drew Reese, Dec 01 '20 at 07:12
Can you try and make a runnable snippet? This illustrates how you can change the color with CSS based on the characters in a string. http://jsfiddle.net/pranavcbalan/54EY4/6/ Just take the random part out and you have almost everything that you need. It even shows you hot to wrap the letters in a span. Also, take a look at this https://stackoverflow.com/questions/21654928/how-can-i-give-different-color-for-each-letter-in-a-text-field — react_or_angluar, Dec 01 '20 at 07:18
i think this will help you check this link. https://stackoverflow.com/questions/49969868/count-characters-textarea-and-change-color-counted — Umang Pandya, Dec 01 '20 at 07:20
I've got it working with a test of 3 with this code `
{cards.back.slice(0,3)}
{cards.back.slice(3, cards.back.length)}
`, but it only works if I change the page after the DOM has already been loaded. If I refresh the page, I just get a 'TypeError: Cannot read property 'slice' of undefined ' error message. — esvnt, Dec 01 '20 at 07:32

Sam Gomena · Accepted Answer · 2020-12-01T07:47:35.593

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.

edited Dec 01 '20 at 07:47

answered Dec 01 '20 at 07:37

Sam Gomena

1,450
11
21

Thanks for the reply! I've done this in an above comment and it works, but only if I edit the js after the page has already loaded. If I refresh the page I get the error 'TypeError: Cannot read property 'slice' of undefined'. How can I fix this? – esvnt Dec 01 '20 at 07:39
1

I sounds like you might not be setting `cards.back` to an initial value (or it's being set to `undefined` after being rendered). An easy way to get around that it with the optional chaining operator which I've updated my answer with! – Sam Gomena Dec 01 '20 at 07:45

score 0 · Answer 2 · answered Dec 01 '20 at 08:13

You can use const, let, or var for text_color, which helps you to customize and change color property.

// var kimarijiCount = 2
// var str = 'Rhino'

const text_color = { color: 'red' };

let res = str.substring(0, kimarijiCount);
let rest = str.substring(kimarijiCount, str.length);

<span style= { text_color }> { res } </span> { rest };

kimarijiCount must be limited to str.length

How to make specific number of characters change color?

2 Answers2