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


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">




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 ; 




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.

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.

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, “”);

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'>");


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.

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

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

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’>”);

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