How do I format part of a field if it is the same as another field?

Card Design
1

For a deck I have, there is an Expression field with a word or words to study and a Sentence field with an example sentence including the Expression.

Is it possible to make Anki format the expression in the sentence field? Maybe underlining it or changing the color, etc. automatically?

So if I have:
Expression - out of the blue
Sentence - He just appeared out of the blue.

Can I format the “out of the blue” in the sentence based on it being the same as the Expression?

Thanks!

2

Maybe you could try something like this:

Front/Back template:

<div id="sentence_input" hidden>{{Sentence}}</div>
<div id="sentence_output"></div>

<script>
   var original_sentence = document.getElementById("sentence_input").innerHTML;

   var formatted_sentence = original_sentence.replace(/{{text:Expression}}/g, '<span class="styled-text">{{text:Expression}}</span>');

   document.getElementById("sentence_output").innerHTML = formatted_sentence; 
</script>

Styling section:

.styled-text {
   text-decoration: underline;
   color: red;
}
3 Likes
3

Great, jcznk! It’s working as expected. I really should up my game to scripts, I’m always needing help with those.

4

EDIT: Ok, I got it, just added another div class. Don’t worry about it! Thanks again!

One more thing. Do you know how I can style the rest of the sentence?

I am trying to apply the original style to .sentence_output in the CSS, but it is not working (tried .sentence_input as well, just in case).

1 Like
5

I got another questions regarding this. :S The script is working perfectly, however, some of the “Expression” fields have different alternatives marked with a / (like abrir/cerrar los ojos).

I guess extracting this from the field to format the other field might be too complicated (especially since the alternative can be anywhere and consist of any number of words), but that is not a problem. I can live with these sentences not highlighting the expression, the functionality of the card remains.

However, the script is not returning the unformatted sentence when there is a slash in the Expression. How could I make it so that even in that case, the sentence appears? Otherwise the place where it should be remains blank and the card becomes pointless for the user.

6

The script is indeed a bit simplistic, and is not well equipped to deal with special characters (.^$*+?|[]()\).

This one seems to fare better:

<script>

var original_sentence = document.getElementById("sentence_input").innerHTML;

var regexText = String.raw`{{text:Expression}}`;

var formatted_sentence = original_sentence.split(regexText).join('<span class="styled-text">' + regexText + '</span>');

document.getElementById("sentence_output").innerHTML = formatted_sentence;

</script>

The only exception, hopefully quite rare, is that it does not work correctly when the fields end with an odd number of backslashes
(e.g. abrir/cerrar los ojos \, or abrir/cerrar los ojos \\\.
abrir/cerrar los ojos \\ should instead work fine)

For more info: javascript - Why can't String.raw end with a backslash? - Stack Overflow

1 Like
7

Great as always, @jcznk! Now all sentences are appearing!

None of them have a backslash, so that’s totally fine. Thank you very much again!

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.