bind svelte elements from {@html} directive-CodePudding

I'm trying to take user input and find all the texts that look something like this >>523 like imageboards do. I convert these to HTML template strings through the regex replace method and sanitize the string. then I put the string in to svelte with {@html input}. It works very well but I have a few issues.

Here is the link to a REPL https://svelte.dev/repl/737a125144474234a100cd871c1d4d5b?version=3.42.6

If you look in the console (for some reason it makes me use devtools console, repl console does not work) you can see it gets me the two a elements there, but the forEach method does not work

I want the created element to link to the referenced post. but one post can have many quote link elements in it. and I have no idea how to get a variable reference to them because I can't use {#each} and I tried this inside onMount:

let quotes = document.getElementsByClassName('postlink');
        quotes.forEach((q) => {
            q.addEventListener('mouseover', (e) => {
                console.log('mousing over q:', q);
            });
            q.addEventListener('mouseout', (e) => {
                console.log('mouse left q:', q);
            });
        });

        console.log(quotes);

And it gives me a type error in the console.

Uncaught TypeError: quotes.forEach is not a function

How can I accomplish this? I want the mouseover and mouseout events to show a preview of the post the quotelink links to.

CodePudding user response：

document.getElementsByClassname returns a NodeList object which doesn't have the forEach function defined, you can parse it to an array like this [...quotes].forEach