JavaScript to remove spaces in type answer?

[mlmmr]

Hi!

I’m trying to get the type answer function to work in a certain way using JavaScript/CSS. I found this resource to start me off. I’ve used AI to try to understand things, but I need some additional help.

I have cards formatted like this:

00 01 02
03 04 05
06 07 08
[...]

(The grouping is always three two digit pairs per line for these cards). I would like to type in the answer for them in the following format: 000102 030405 060708....

There are two behaviours I would like to change in how Anki treats this:

1. Anki introducing dashes in my typed answer (to indicate the lack of original spaces) once the card is flipped
2. Anki displaying spaces the same way as line breaks in the correct section element

The code in the link above solves the first issue. With this snippet on the backside of the card the dashes are removed in my typed answer:

<script>
    var typed_answer = document.querySelector("#typeans").innerHTML;
    var typed_answer_without_dashes = typed_answer.replace(/[-]/g, ""); 
    document.getElementById("typeans").innerHTML = typed_answer_without_dashes;
</script>

For the second behaviour, I’m not sure what to do.

I would like to have a way to se the difference between spaces and line breaks in the “correct answer” element. So I thought maybe I could use a script to remove spaces but keep line breaks, basically turning this 00 01 02 03 04 05 06 07 08 into this 000102 030405 060708 for the correct answer section as well.

I asked an AI about it, and something like function removeSpaces() + replace() method, using \s(?!\n might accomplish this? I don’t know the variable ID for the “correct answer” element though, nor how to really do this.

Could someone help me out a bit? I hope I explained things clearly.

[dae]

I’m afraid this may not be something you can achieve using JS - the type-in-the-answer feature was not designed to allow transformation of your input, and it doesn’t currently expose a hook to do so.

[mlmmr]

Ah, thank you for letting me know. Would it perhaps be possible to go the other way around?

(We can ignore the type-in-the-answer feature for a minute, just imagine a note that has a single field that is displayed on both the frontside and the backside of the card).

If I format the field content without spaces, could JavaScript insert (display) a space every second character on the frontside of the card only?

I.e. if the card is formatted like this:

000102
030405
060708

… could JavaScript be used ot display it like this on the frontside only?

00 01 02
03 04 05
06 07 08

AI suggested that this was possible and gave these two suggestions but they don’t work when I try them:

Code suggestion 1

{{Front}}
<script>
var spacedFront = "{{Front}}".replace(/(.{2})/g, "$1 ");
document.getElementById("front").innerHTML = spacedFront;
</script>

This code uses the replace() method with a regular expression that matches every two characters and replaces them with the same two characters followed by a space. The resulting string is then assigned to the spacedFront variable and set as the HTML of the element with the ID “front”.

Code suggestion 2

{{Front}}
<script>
var spacedFront = "";
for (var i = 0; i < "{{Front}}".length; i++) {
  spacedFront += "{{Front}}".charAt(i);
  if (i % 2 == 1) {
    spacedFront += " ";
  }
}
document.getElementById("front").innerHTML = spacedFront;
</script>

This code creates a new variable spacedFront and loops through each character of the original {{Front}} variable. For every second character, it adds a space to the spacedFront variable. Finally, it sets the HTML of the element with the ID “front” to the spacedFront variable.

[dae]

Untested, but the first snippet should be something like

<div id=front />
<script>
var spacedFront = "{{Front}}".replace(/(.{2})/g, "$1 ");
document.getElementById("front").innerHTML = spacedFront;
</script>

[mlmmr]

Thank you for taking the time, I appreciate it. This worked well to insert spaces every second character, but it also removed the original line breaks I had in the field. How would I modify the snippet to include the line breaks that occur every sixth digit (or insert new ones)?

[hkr]

Try replacing this line in dae’s post above

var spacedFront = "{{Front}}".replace(/(.{2})/g, "$1 ");

with

var spacedFront = `{{text:Front}}`.replace(/(\d{2})(\d{2})(\d{2})/g, "$1 $2 $3<br>");

[mlmmr]

That worked perfectly. Thank you for the help!