You can codeblock your example (backticks before and after), so it doesn't turn into a link.
If you want to operate on part of a field, you won’t be able to do that with a simple field replacement. You’ll have to use JavaScript to separate out the words [which I can’t help you with, but I’m sure someone else can].
However, because cloze cards all share a template, I’m less sure that it’s going to be possible to have different links on different cards. [JavaScript-ers, feel free to prove me wrong!] It seems like it would suffice to display the full sentence with each word becoming a separate dictionary link, right?
I did think about making them separate dictionary links, but I wanted the link to be dynamic to / reference the cloze 1 and 2 so I don’t have to manually update the hyperlink for each new card.
My other thought was potentially making a new field for each word, but then that still wouldn’t take into account multiple cloze deletions. So, for example, it wouldn’t only pull cloze 2 on the second card. But unless a JavaScripter comments, I may have to take the long way around
If I understand correctly the content in {{Text}} is like this: maybe some text before {{c1::word1}} maybe some text in between {{c2::word2}} maybe some text after
?
The cloze cards indeed share the same template code but it turns out you can detect which card is being rendered from the <body> tag in the html.
For cloze 1 the body will have the class “card1”, for cloze 2 “card2” etc.
That can then be used to specify the regex to get only that cloze part out of the content in {{Text}}
Replace the current link in your Back template with this:
<a
style="font-size: 12px; text-decoration: none; float: center"
id="naver-dict-link"
>
Naver 한영
</a>
<script>
// Get which card number class the document body has, card1, card2 etc.
var cardNumber = document.body.className.match(/card(\d+)/)?.[1]
// With card number we can get only the c1, c2 etc. cloze word in the Text
var clozeRegexp = new RegExp(`\{\{c${cardNumber}::(.*?)\}\}`);
var clozeWord = "{{Text}}".match(clozeRegexp)?.[1];
// If either of the regexes fail to find a match, clozeWord will be "undefined"
var url = `https://korean.dict.naver.com/koendict/#/search?query=${clozeWord}`;
// Set the href the link
document.getElementById("naver-dict-link").href = url;
</script>
One caveat: for whatever reason, this will not work on the card Front. At the time when the javascript runs, the <body> doesn’t yet have the class added to it. Waiting for the card rendering to complete before running the code would be required on the card Front. I didn’t bother figuring out how that’d work.
@jhhr I edited what you did to add a Conjugation link and a Google Image link. Out of curiosity / trying to better understand the Java that I don’t speak, is there a simpler way I could’ve written this other than repeating it three times.
<footer>
<hr>
<a
style="font-size: 12px; text-decoration: none; float: center"
id="naver-dict-link"
>
Naver 한영 |
</a>
<script>
// Get which card number class the document body has, card1, card2 etc.
var cardNumber = document.body.className.match(/card(\d+)/)?.[1]
// With card number we can get only the c1, c2 etc. cloze word in the Text
var clozeRegexp = new RegExp(`\{\{c${cardNumber}::(.*?)\}\}`);
var clozeWord = "{{Text}}".match(clozeRegexp)?.[1];
// If either of the regexes fail to find a match, clozeWord will be "undefined"
var url = `https://korean.dict.naver.com/koendict/#/search?query=${clozeWord}`;
// Set the href the link
document.getElementById("naver-dict-link").href = url;
</script>
<a
style="font-size: 12px; text-decoration: none; float: center"
id="kverb-conjugation"
>
Conjugation |
</a>
<script>
var cardNumber = document.body.className.match(/card(\d+)/)?.[1]
var clozeRegexp = new RegExp(`\{\{c${cardNumber}::(.*?)\}\}`);
var clozeWord = "{{Text}}".match(clozeRegexp)?.[1];
var url = `https://koreanverb.app/?search=${clozeWord}`;
document.getElementById("kverb-conjugation").href = url;
</script>
<a
style="font-size: 12px; text-decoration: none; float: center"
id="google-image"
>
Google Images
</a>
<script>
var cardNumber = document.body.className.match(/card(\d+)/)?.[1]
var clozeRegexp = new RegExp(`\{\{c${cardNumber}::(.*?)\}\}`);
var clozeWord = "{{Text}}".match(clozeRegexp)?.[1];
var url = `https://www.google.co.kr/search?tbm=isch&q=${clozeWord}`;
document.getElementById("google-image").href = url;
</script>
</footer>
You only need to acquire the clozeWord variable once, then just add the same variable to each link.
Create each link before the <script> part
Setting the urls into a variable before setting them into the href could be skipped
Since there’s now three links using the same style="font-size: 12px; text-decoration: none; float: center" you could instead set a class and then define the css in the card Styling section. That way you only need to edit place part if you want to change the link style
Card template links
<footer>
<hr />
<a class="footer-link" id="naver-dict-link"> Naver 한영 | </a>
<a class="footer-link" id="kverb-conjugation"> Conjugation | </a>
<a class="footer-link" id="google-image"> Google Images </a>
<script>
// Get which card number class the document body has, card1, card2 etc.
var cardNumber = document.body.className.match(/card(\d+)/)?.[1];
// With card number we can get only the c1, c2 etc. cloze word in the Text
var clozeRegexp = new RegExp(`\{\{c${cardNumber}::(.*?)\}\}`);
var clozeWord = "{{Text}}".match(clozeRegexp)?.[1];
// If either of the regexes fail to find a match, clozeWord will be "undefined"
// Set the href on the links
document.getElementById(
"naver-dict-link"
).href = `https://korean.dict.naver.com/koendict/#/search?query=${clozeWord}`;
document.getElementById(
"kverb-conjugation"
).href = `https://koreanverb.app/?search=${clozeWord}`;
document.getElementById(
"google-image"
).href = `https://www.google.co.kr/search?tbm=isch&q=${clozeWord}`;
</script>
</footer>
Wow - didn’t even consider putting the font in the Styling part. Much like my language learning, I’m slowly acquiring Java literacy by reading how other ppl write things. Really appreciate the help @jhhr
