Estoy tratando de replicar el código en este artículo: https://depth-first.com/articles/2020/08/24/smiles-validation-in-the-browser/

Lo que estoy tratando de hacer diferente es que estoy usando un área de texto en lugar de una entrada para tomar una entrada de varias líneas. Además de mostrar un mensaje de error, también quiero mostrar la entrada que no pasa la validación.

El script de validación original es este:

 const path = '/target/wasm32-unknown-unknown/release/smival.wasm'; const read_smiles = instance => { return smiles => { const encoder = new TextEncoder(); const encoded = encoder.encode(`${smiles}\0`); const length = encoded.length; const pString = instance.exports.alloc(length); const view = new Uint8Array( instance.exports.memory.buffer, pString, length ); view.set(encoded); return instance.exports.read_smiles(pString); }; }; const watch = instance => { const read = read_smiles(instance); document.querySelector('input').addEventListener('input', e => { const { target } = e; if (read(target.value) === 0) { target.classList.remove('invalid'); } else { target.classList.add('invalid'); } }); } (async () => { const response = await fetch(path); const bytes = await response.arrayBuffer(); const wasm = await WebAssembly.instantiate(bytes, { }); watch(wasm.instance); })();

Para trabajar con un área de texto, cambié la función de reloj a esto y agregué un elemento <p id="indicator"> al html para mostrar un error:

 const watch = instance => { const read = read_smiles(instance); document.querySelector("textarea").addEventListener('input', e => { const { target } = e; var lines_array = target.value.split('/n'); var p = document.getElementById("indicator"); p.style.display = "block"; p.innerHTML = "The size of the input is : " + lines_array.length; if (read(target.value) === 0) { target.classList.remove('invalid'); } else { target.classList.add('invalid'); } }); }

Ni siquiera puedo obtener un recuento de las entradas que fallan en la validación. Creo que esto es async js y solo soy un principiante en JavaScript, por lo que es difícil seguir lo que sucede aquí, especialmente la parte donde la función e se hace referencia a sí misma.

 document.querySelector("textarea").addEventListener('input', e => { const { target } = e;

¿Puede alguien ayudarme a comprender este código complicado y descubrir cómo obtener un recuento de las entradas que fallan en la validación y también imprimir la cadena/índice de las mismas para ayudar al usuario?