Anki messes up my json; why?

Anki Card Design
1

If in an anki field I wish to use js literals, and have e.g. (while use the raw editor thing and not the html editor thing option in the anki browser)

[0, ['43%', '34%'], "Primary \"hi\" str", "str2 <b color=\"red\">hi</b>"],

in an anki field in the browser thing.

Then why does anki automatically change it to:

[0, ['43%', '34%'], "Primary \"hi\" str", "str2 <b color="\&quot;red\&quot;">hi</b>"],

It is very troublesome and prevents me from using html inside js literals. Please advise if you can. Thank you

2

Because

is not proper HTML.

It should either be escaped by converting angular brackets to &lt; and &gt; (which can be done automatically if you paste the string into the WYSIWYG part of the editor instead of the source code section and then converted back by accessing .textContent of the element wherever you are using it in JS) or placed inside one of the HTML tags that allow unescaped raw code (<script> tags are automatically removed from field content as part of santitisation, but <xmp> seems to still be available and possible to be read with .innerHTML, although it is depricated).

Alternatively, you can use quote alternation to avoid interference between the plain-text part of the string and the HTML code:

[0, ['43%', '34%'], 'Primary "hi" str', 'str2 <b color="red">hi</b>']

This one can be read with .innerHTML just as well.

1 Like
3

Still a little confused, but if I am understanding correct, you are saying it is because anki fields are html fields and I am using it as a javascript field, so the problem is that anki fields undergo html sanitisation which mistakenly interprets my js as html and messes it up. So the root problem is that I am using an html field as an javascript field. Is this correct? And if so, how can I somehow pass javascript (or even json) data structures to my templates via an anki field? Is there some convention you guys use?

4

Yes, all fields in Anki are stored as HTML, so any other format should be properly escaped to be put inside.

Sanitisation itself is not the problem, and is not inherent to HTML, it is just what Anki started applying from version 25.2 onwards for security reasons. It somewhat limits the solution options, but only prohibits the least advisable one anyway.

You escape it as I described in the previous post and parse it using JS in the card template.

1 Like
5

Thank you so much for the explanation! Would have spent days on this. So I discovered that I actually was mistaken and have to use json not js literals, and json is more restrictive so I can’t use the single quotes strategy. So I take json string and html encode it so the anki field won’t sanitise it away, then how to access within the template? Because currently I have

let x = {{js_field}}

But that won’t work with html escaped string.

Are you saying to instead do something like

<div>{{js_field}}</div>

And then use js to extract that field?

1 Like
6

Basically, yes. You can add an Id to locate the element more easily from JS, and then use something like

jsonString = document.getElementById('jsonField').textContent;
let x = JSON.parse(jsonString);

( keep in mind that you’ll need to change single quotes around 43% and 34% in your original string to double quotes as well)

7

I could kiss you! Thank you so much! Spent days on this. I am very new to javascript and html and only learned some of it only for anki!

Thanks again!

1 Like
8

Glad to be of help) Feel free to get back with further questions anytime. All the JS I learned is from formatting Anki cards as well, so I can relate.

2 Likes