js - marking bracket pair in input text box depending on cursor position

Question

I'm working on a math project. Therefore I want to modify the 'input text'-Box. It should mark the bracket pair of the cursor i. e. the bracket positioned left and the one right from the cursor.

I already know, how to get the cursor position:

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

Now I thought about formatting a string

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

formatting the span tag (maybe bold) and put it into the Text field with

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

Unfortunately the value variable doesn't take formatted strings, so it won't work.

Mayby someone has an idea or there is a library that already solves the problem?

Thanx for your help...

Philipp

Answer 1

It seems like an overkill but you could use one of the WYSIWYG editor libs. The most popular are:

• https://quilljs.com/
• https://ckeditor.com/