Help with JavaScript Code (Coloring allcaps words)

JavaScript
1

Hello people. I am new here and am a total layman to coding. I hope that this is the right place for such questions: I was wondering if someone could help me with a Javascript code to parse the text for words written in all-capitalized letters and color them in red, green, blue alternatingly.

I will be using this inside my Anki card template for my cards.

2

Do you know how to write some javascript at all? What have you tried?

I suggest that you take in some text, split it into words (by breaking it on the spaces) and then loop through each of the words you split. Compare it to a capitalized version of the word and if they are equal, you know you have a word that needs to be colored.

Another trick you could do is take a copy of the words you want to search for capitalized words in, loop through it and once you find a word that is capitalized, do a string replace() method call.

Resources to read about include… replace, split, toUpperCase and the for loop.

Good luck to you. :slight_smile:

1 Like
3

If you want to cycle through those colours you will also probably want to look at the remainder (%) operator.

For example if the colours are stored in an array they will be indexed. Indexes start at zero e.g.

const coloursArray = ['red','green','blue'];
coloursArray[0] // red
coloursArray[1] // green
coloursArray[2] // blue

As you replace the words you will want to cycle through those indexes e.g. 0,1,2,0,1,2,0,1… etc

You can do that with the remainder or modulo operator. In your example you have 3 colours so that will be the number to divide by.

Using a loop as an example

for (let i = 0; i < 10; i++) {
  console.log(i % 3);
}

Outputs

0 1 2 0 1 2 0 1 2 0

or with the colours array

for (let i = 0; i < 10; i++) {
  console.log(coloursArray[i % 3]);
}

Outputs

red green blue red green blue red green blue red
2 Likes
4

Just for fun and heavily borrowed from everyone including AI here is a small working version. This is only meant as a starting point so the experts around here can point out the flaws more easily.

Whether or not this is any use inside your template is a completely different matter. :slight_smile:

1 Like
5

I did some similar ones Paul :slight_smile:

Using Martyr2’s approach

function colourUpperCaseWords(text) {
  const colours = ['red', 'blue', 'green'];
  const words = text.split(' ');
  let colourIndex = 0;
  
  for (let i = 0; i < words.length; i++) {
    if (words[i] === words[i].toUpperCase()) {
      words[i] = `<span class='${colours[colourIndex]}'>${words[i]}</span>`;
      colourIndex = (colourIndex + 1) % 3;
    }
  }
  
  return words.join(' ');
}

This one is very similar to yours. Yours has a more comprehensive regex allowing for hyphenated words and limiting words to 2 letters or more.

function colourUpperCaseWords(text) {
  const upperCaseWordsRx = /[A-Z]+/g;
  const colours = ['red', 'blue', 'green'];
  let i = 0;
  
  return text.replaceAll(upperCaseWordsRx, (_, word) => {
    const replacement = `<span class='${colours[i]}'>${word}</span>`;
    i = (i + 1) % 3;
    return replacement;
  })
}

Then for fun a generator function

function* cycler(items) {
    const len = items.length
    let i = 0;
    
    while(true) {
        if (i === len) {
            i = 0;
        }
        yield items[i];
        i += 1;
    }
}

Which can be used like this.

const colours = cycler(['red', 'green', 'blue'])
colours.next().value // red
colours.next().value // green
colours.next().value // blue
colours.next().value // red

and inside the replacer function

return text.replaceAll(upperCaseWordsRx, (_, word) => {
  return `<span class='${colours.next().value}'>${word}</span>`;
})
2 Likes