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.
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. 
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
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.
I did some similar ones Paul
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>`;
})
I have found this code which does the trick inside Anki (I have decided I will stick with just the red color for now). My only issue with this is its long loading time. Wonder if it could be optimised
<script>
(function() {
function colorCapsText() {
const cardContent = document.getElementById("content");
if (!cardContent) return;
const regex = /\b[A-ZÄÖÜß]+\b/g;
// Use TreeWalker to target only text nodes and minimize unnecessary traversals
const walker = document.createTreeWalker(cardContent, NodeFilter.SHOW_TEXT, null, false);
const changes = [];
let node;
while ((node = walker.nextNode())) {
const text = node.textContent;
if (regex.test(text)) {
const newText = text.replace(regex, '<span class="all-caps">$&</span>');
const span = document.createElement('span');
span.innerHTML = newText;
changes.push({ oldNode: node, newNode: span }); // Collect changes
}
}
// Apply all changes in one go to minimize DOM updates
changes.forEach(({ oldNode, newNode }) => {
oldNode.parentNode.replaceChild(newNode, oldNode);
});
}
// Run the function after the card is rendered
requestAnimationFrame(colorCapsText);
})();
</script>
Looks at all the previous posts
JOHNNY-5 would like a word.
(The definition of ‘word’ is somewhat ambiguous)
As far as optimization… well, your code is walking through every node of the card. Are there multiple nodes in a card? Is there a reason you cant pass the card text fields to the function and handle it in-situ before it gets added to the DOM?
Questions we cannot answer blindly.
Anki cards are written in HTML and CSS. I don’t know if that helps.
Is there a reason you cant pass the card text fields to the function and handle it in-situ before it gets added to the DOM?
I don’t know any particular reason. After trying with ChatGPT to come up with a code that works, this is what I am left with. (other versions it came up with broke cloze text and made the backside answer of the card not be hidden by the […] box. )
Here is what my card now looks like, as intended (with the issue of the […] fixed):
I am left with the loading time issue.
(I am a layman 
)
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.