Estoy trabajando en un proyecto de matemáticas. Por lo tanto, quiero modificar el cuadro 'texto de entrada'. Debe marcar el par de corchetes del cursor, es decir, el corchete colocado a la izquierda y el que está a la derecha del cursor.

Ya sé, cómo obtener la posición del cursor:

 document.getElementById('inutField').addEventListener('keyup', e => { console.log('pos: + e.target.selectionStart) })

Ahora pensé en formatear una cadena

 str = '3*<span>(</span>4+5<span>)</span>*6

formateando la etiqueta span (tal vez en negrita) y colóquela en el campo Texto con

 document.getElementById('inputField').value = str;

Desafortunadamente, la variable de valor no acepta cadenas formateadas, por lo que no funcionará.

¿Quizás alguien tiene una idea o hay una biblioteca que ya soluciona el problema?

Gracias por tu ayuda...

Felipe