Solved: Using regular expressions replace function for html <img src=''> results in broken image url

Anki Card Design
1

Hi!

I’m trying to use a javascript function to create html image urls depending on the gender.

The code doesn’t work. As soon as I wrap the html code with <>, , the image url is broken.

I did some troubleshooting within the code. According to output 1, the regex replace function seems to be correct.

Does anyone know why the image urls are broken?

Thank you!

<div id="genderimageid">

{{gender}}

</div>

<script>

function fc_genderimageid() {

    var genderTerm1 = "{{gender}}".trim();
    var genderTerm2 = "{{gender}}".trim().toLowerCase();
		
		var image_source_string = "<img src='feminin.jpg'>"

		var image_source_regex1 = genderTerm2.replace(/(.+$)/g, "img src='$1.jpg'");
		var image_source_regex2 = genderTerm2.replace(/(.+$)/g, "<img src='$1.jpg'>");
 	
    genderElem = document.getElementById("genderimageid");
    genderElem.innerHTML = 'Field input:'+genderElem.innerHTML+ "<br><br>"+'image source as string works:<br>' + image_source_string +'<br> genderTerm1 ouput: '+ genderTerm1 +'<br> genderTerm2 ouput: '+ genderTerm2 +'<br><br>check regex replace output 1:<br>' +image_source_regex1 + '<br><br>check regex replace output 2:<br>' + image_source_regex2 ; 

}

fc_genderimageid()

</script>
2

As far as I know, field references inside scripts don’t work. You can wrap {{gender}} in a tag and in the script, retrieve the tag’s content instead of trying to reference the field.

3

Thank you for your answer.
I’m not sure if I understood correctly.

The field reference {{gender}} seems to work in this code.
The output of the variable genderTerm1 and genderTerm2 are in both cases “feminin”.
The output of the variable image_source_regex1 is: img src=‘feminin.jpg’

The value of {{gender}} is parsed correctly.
But as soon as I wrap the code with < >, it results in an broken image url.

4

I just tried to amend the code by calling the id, but it also results in a broken image url.

var genderTerm3 = document.getElementById(“genderimageid”).innerHTML.trim();
var image_source_regex3 = genderTerm3.replace(/(.+$)/g, “”);

5

Sorry, I don’t use JavaScript often in Anki and got it backwards. You can’t modify field references because they will already be replaced. So just ignore what I wrote.

As for your problem, that’s strange. I mean, you can just replace

var image_source_regex2 = genderTerm2.replace(/(.+$)/g, "<img src='$1.jpg'>");

with

var image_source_regex2 = "<" + genderTerm2.replace(/(.+$)/g, "img src='$1.jpg'") + ">";

But I have no idea why this is necessary.

var image_source_regex2 =genderTerm2.replace(/(.+$)/g, "<" +  "img src='$1.jpg'" + ">");

also works, so the problem is somehow with the literal tag quote.

6

Hi Rumo, thank you for your solution! It works!

This is the answer I’ve got from ssnoyes on reddit:

It looks like Anki is parsing the note; special characters inside angle brackets get HTML encoded, so your "<img src='$1.jpg'>" is being encoded into "<img src='%241.jpg'>" (because %24 is the HTML encoding for the ‘$’ character).

Sounds like a bug.

1 Like
7

That makes sense. So JS doesn’t see a backreference because Anki encoded the $ and replaces with the literal string. The image reference is evaluated after decoding, so Anki then searches for the image $1.jpg.

Thanks for posting the explanation here. :slight_smile:

1 Like
8

The issue seems to derive from the first bracket.

I only have to separate the first bracket from the html code:

var image_source_regex2 = genderTerm2.replace(/(.+$)/g, “<” + “img src=’$1.jpg’>”);

Alternative:
var image_source_noreg = “<” + “img src=’”+genderTerm2+".jpg’>";