Color Formatting of Gender-Marked Articles for 4 Languages using Regex and Javascript

Anki Card Design
1

Hi Anki community,

so y’all, I have never thought that regular expressions combined with javascript could keep me up until 3 am at night. Well, it does lately, apparentely. Lockdown accepted, I guess…

I’ve used and adjusted the code snippet provided by ssnoyes (thanks!) in this reddit post:

This is what my latest night project does:

Gender-marked articles are color-formatted depending on their gender (masculine, feminine, neuter).

4 languages are supported: German, French, Spanish and Portuguese.

(You can adjust the code according to your needs. For Italian, you would have to replace French, as the French article “le” represents masculin singular, wheras the Italian article “le” represents feminine plural.)

The code works best for short text snippets, as you would use for your target vocabulary in most cases.

The code also deals with the cat-caterpillar-phenomenon, so substrings like “die” in the noun “Diele”, “der” in Leder, or “le” in “leçon” are not falsely formatted.

What you need:

  1. field for your target word, e.g. {{target word}}

  2. field for gender of your target word, e.g. {{gender}}, gender values are masc, fem and neutr

What you see in the screenshot below is actually an entire single text input. The coloring works in this case for German because I placed the two feminin words (die Mutter, die Mütter) in the first line. If otherwise aligned, the code gets mixed up. So, it’s not meant for longer texts in case of German or French due to its gender ambiguous articles (“die”, “der”, “l’”, “les”).

This is the screenshot:

gender-marked-articles
gender-marked-articles707×672 50.9 KB

This is the CSS:

        <style>
        .singular { background-color: lightblue; }
.plural { background-color: lightsteelblue; }

.singular.masc { background-color: lightblue; }
.singularMasc { background-color: lightblue; }
.pluralMasc { background-color: lightsteelblue; }

.articledie { background-color: pink; }
.articledie.fem { background-color: pink; }
// change color to lightblue:
.articledie.masc { background-color: pink; }
.articledie.neutr { background-color: mediumaquamarine; }

.singular.fem { background-color: pink; }
.singularFem { background-color: pink; }
.plural.fem { background-color: palevioletred; }
.pluralFem { background-color: palevioletred; }

.singularNeutr { background-color: lightgreen; }
.pluralNeutr { background-color: mediumaquamarine; }
            </style>

This is the HTML code:

<div id="WORD"> {{target word}} </div>

This is the javascript code:

    <script>

    function article(){

if (!document.getElementById('WORD')) {
  return;}

var gender = "{{gender}}".trim().toLowerCase();

pairs = [

 [/(\bder)(?=\W)/gi, "singularMasc"],
 [/(\bdie)(?=\W)/gi, "articledie"],
 [/(\bdas)(?=\W)/gi, "singularNeutr"],

 [/(?<=\bder[\s\S]*?)(\bdie)(?=\W)/si, "pluralMasc"],
 [/(?<=\bdie[\s\S]*?)(\bdie)(?=\W)/si, "pluralFem"],
 [/(?<=\bdas[\s\S]*?)(\bdie)(?=\W)/si, "pluralNeutr"],


[/(\bl['])/gi, "singular"],
 [/(\ble)(?=\s|[(),.]|$)/gi, "singularMasc"],
 [/(\bla)(?=\s|[(),.]|$)/gi, "singularFem"],
 [/(\bles)(?=\s|[(),.]|$)/gi, "plural"],
 [/(?<=\ble(?=\W)[\s\S]*?)(\bles)(?=\W)/gi, "pluralMasc"],
 [/(?<=\bla(?=\W)[\s\S]*?)(\bles)(?=\W)/gi, "pluralFem"],


 [/(\bel)(?=\s|[(),.]|$)/gi, "singularMasc"],
 [/(\blo)(?=\s|[(),.]|$)/gi, "singularNeutr"],
 [/(\blos)(?=\s|[(),.]|$)/gi, "pluralMasc"],
 [/(\blas)(?=\s|[(),.]|$)/gi, "pluralFem"],

 [/(\bo)(?=\s|[(),.]|$)/gi, "singularMasc"],
 [/(\ba)(?=\s|[(),.]|$)/gi, "singularFem"],
 [/(\bos)(?=\s|[(),.]|$)/gi, "pluralMasc"],
 [/(\bas)(?=\s|[(),.]|$)/gi, "pluralFem"],

]


wordinput = document.getElementById('WORD');

for (KEY of pairs)

if(gender != undefined)
{wordinput.innerHTML = wordinput.innerHTML.replace(KEY[0], "<span class='" + KEY[1] + " " + gender + "'>$1</span>");}

else
{return KEY;}

}


article()

    </script>

If you happen to find any flaws or if you have any suggestions, I’d be grateful.

Thanks!

reddit post:

4 Likes