Script not changing how text field is displayed

[konomu]

I have a field in Anki which is basically a string of words each separated by a slash.

Pteridobiotina/Angiosperms/Commelinales/Pontederiineae/Pontederiaceae/Pontederia/Oshunae/crassipes

I’m trying to get Anki to word-wrap this at the slashes, not in the middle of the words.

To achieve this, I’ve attempted to write a Javascript that inserts zero-width spaces after the slashes. The div in question is <div id='taxonomy'>{{Taxonomy}}</div>

The script is:

<script>
function insertZeroWidthSpaces() {
    // Select the taxonomy div
    var taxonomyDiv = document.getElementById('taxonomy');
    if (taxonomyDiv) {
        // Get the inner HTML
        var innerHTML = taxonomyDiv.innerHTML;
        // Replace all slashes with slashes followed by a zero-width space
        taxonomyDiv.innerHTML = innerHTML.replace(/\//g, '/\u200B');
    }
}
// Run the function when the page loads
window.onload = insertZeroWidthSpaces;
</script>

Along with the css:

#taxonomy {
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
}

However, the script has no effect on how the field is displayed, and no zero-width spaces are inserted after the slashes. The line breaks are still inside of the words. I have tested this in HTML, and it works fine there, but it doesn’t work with Anki.

[konomu]

Solved. The script has to be formatted like

<script>
{
    // Select the taxonomy div
    var taxonomyDiv = document.getElementById('taxonomy');
    if (taxonomyDiv) {
        // Get the inner HTML
        var innerHTML = taxonomyDiv.innerHTML;
        // Replace all slashes with slashes followed by a zero-width space
        taxonomyDiv.innerHTML = innerHTML.replace(/\//g, '/\u200B');
    }
}
</script>