How to avoid unescaping characters

Anki Card Design
1

When imputing an escaped character in a field in the HTML editor, it is automatically unescaped (unless it one of  , <, >, &). The same thing happens when importing with Allow HTML in fields enabled. E.g. ' is changed to be stored as '.
How can I avoid this?

One thing I can do is to input it as ' and in javascript replace this with ' so it is correctly displayed, but is there a way to have it mimic the behaviour as with  , <, >, &? I do not see why it is being unescaped.

2

I don’t know but am curious: Why does it matter if they get converted like that? Does it cause any kind of breakage that you’re trying to solve?

3

I am accessing the field in javascript e.g. var front = '{{Front}}' and it breaks if any 'appears in the field. Right now I replaced it with ` inside the field, but I also use other characters inside the field such as | and ; as delimiters for lists of variable size that I want to split with.

4

May I propose to you the oposite?

Use something like this:

var front = `{{Front}}`

And in the field you use " and ' normally.

The js thing is a multiline string. I used it myself to help another user and it works great – probably for your usecase as well.

5

Yeah that looks good for the ' case. But it still does not solve if I want to do

var items = front.split("|");
6

It seems to work for me.

  1. Add the string Hello | "World" | is a string. to a basic card {{Front}} field.
  2. Add the following html on the front:
{{Front}}

<script>
	var front = `{{Front}}`;
	var items = front.split("|");

	console.log(items);
</script>
  1. Output from console log is correct:
[
    "Hello ",
    " \"World\" ",
    " is a string."
]

see picture as well:

anki
anki1920×1074 167 KB

Can you tell me what exactly doesn’t work if you try to split it? And maybe even give example strings?

7

Or alternatively you could do something like this:

<div id="output"></div>

<div id="data" style="display: none">{{Front}}</div>

<script>
  // Get the raw field data
  const data = document.getElementById("data").innerHTML;

  // Do stuff with the field data
  const output = data.split("|").join("<br />");
  document.getElementById("output").innerHTML = output;
</script>
2 Likes
8

What I mean is it does not work if an item itself contains &#124; characters. E.g. if I wanted the string
item 1 | item 2 &#124; item 2 extra | item 3
it would not be possible to have this string stored in Anki as it would automatically unescape the &#124; into | which would split item 2 into two separate items.

9

It seems like if you add it in the non-html editor it works fine:

anki
anki1919×1074 162 KB

Because anki changes Hello | "World" | is a &#124; string. from the non-html view to Hello | "World" | is a &amp;#124; string. if you view it as html. Maybe that’s a suitable workaround in your case?

But I agree it might be a bit unexpected.

10

I guess you could escape it in another way e.g. URI encoding:

Template

<div id="output"></div>

<div id="data" style="display: none">{{Front}}</div>

<script>
  // Get the raw field data
  const data = document.getElementById("data").innerHTML;

  // Do stuff with the field data
  const output = data.split("|").join("<br />");
  document.getElementById("output").innerHTML = decodeURIComponent(output);
</script>

{{Front}}

' " ` | hello %7C world | ' " `

Output

image
image208×120 1.85 KB

2 Likes
11

Yeah as you’ll see from my first message, this is also the solution I found with first splitting and then manually replacing with the wanted character, but I was mostly asking to find out why the characters are even escaped and if it could be avoided.

1 Like
12

This is a nice solution I had not thought of, thank you