javascript - Disallow Caret inside HTML anchor tags -

i have contenteditable paragraph containing multiple anchor tags shown below. each anchor tag contains text square brackets. assume pipe caret:

<p contenteditable='true'>this <a>[text]|</a>. here <a>[more]</a></p> 

after user has typed key, how detect if caret between closing square bracket on left , closing anchor tag on right , if so, move right of closing anchor tag prevent typing anchor tag.

i have been through half dozen posts including one: contenteditable put caret outside inserted span

however none of them address specific need. in advance.

set anchors not contenteditable , person not able edit text inside of it. (they can delete it)

<p contenteditable='true'>this <a contenteditable="false">[text]</a>. here <a contenteditable="false">[more]</a></p>

and allow them edit text inside

<p contenteditable='true'>this <a contenteditable="false">[<span contenteditable='true'>text</span>]</a>. here <a contenteditable="false">[<span contenteditable='true'>more</span>]</a></p>