How to avoid unescaping characters

[Bjoe]

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.

[Anon_0000]

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?

[Bjoe]

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.

[Anon_0000]

@Bjoe

e.g. var front = '{{Front}}' and it breaks if any 'appears in the field. Right now I replaced it with ``` inside the field

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.

[Bjoe]

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

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

[Anon_0000]

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> 

3. Output from console log is correct:

[
    "Hello ",
    " \"World\" ",
    " is a string."
]

see picture as well:

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

[rossgb]

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>

[Bjoe]

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

[Anon_0000]

@Bjoe

E.g. if I wanted the string
item 1 | item 2 | item 2 extra | item 3
it would not be possible to have this string stored in Anki as it would automatically unescape the | into |

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

Because anki changes Hello | "World" | is a | string. from the non-html view to Hello | "World" | is a | 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.

[rossgb]

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

[Bjoe]

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.

[Bjoe]

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