Code editor cursor misaligned when editing a long single-line of code

I have a code segment with language set to JS.

Within the code block is an extra long string whose length exceeds the editor window. To view the whole string you need to use the horizontal scroll bar a lot.

The editor is not resolving cursor positioning within this line of text; on click the I-beam is misaligned over a character (not between) or when it appears to be correctly sitting between characters for editing to commence I find the wrong characters deleted (if backspace or delete key used) or new text inserted being placed in wrong position.

Basically you cannot trust or use the editor for this line of text as any edits are incorrect.

The line of code is:

var rX= /(^180[ |-]{0,1}2[ |-]{0,1}[0-9]{1}[ |-]{0,1}[0-9]{2}$)|(^1800|1300[ |-]{0,1}[0-9]{3}[ |-]{0,1}[0-9]{3}$)|(^1800|1300[ |-]{0,1}[0-9]{2}[ |-]{0,1}[0-9]{2}[ |-]{0,1}[0-9]{2}$)|(^13[ |-]{0,1}[0-9]{2}[ |-]{0,1}[0-9]{2}$)|(^[1-9]{1}[0-9]{3}[ |-]{0,1}[0-9]{4}$)|(^\({0,1}02\){0,1}[ |-]{0,1}[1-9]{1}[0-9]{3}[ |-]{0,1}[0-9]{4}$)|(^\({0,1}0[3|7|8]\){0,1}[ |-]{0,1}[0-9]{4}[ |-]{0,1}[0-9]{4}$)|(^0[4|5][0-9]{2}[ |-]{0,1}[0-9]{3}[ |-]{0,1}[0-9]{3}$)|(^0[4|5][0-9]{2}[ |-]{0,1}[0-9]{2}[ |-]{0,1}[0-9]{2}[ |-]{0,1}[0-9]{2}$)|(^\+{0,1}61[ |-]{0,1}[4|5][ |-]{0,1}[0-9]{4}[ |-]{0,1}[0-9]{4}$)|(^\+{0,1}61[ |-]{0,1}[4|5][0-9]{2}[ |-]{0,1}[0-9]{3}[ |-]{0,1}[0-9]{3}$)|(^\+61\s*[45]\s*(?:[0-9]\s*){8}$)|(^\+{0,1}61[ |-]{0,1}[2|3|7|8][ |-]{0,1}[1-9]{1}[0-9]{3}[ |-]{0,1}[0-9]{4}$)|(^\+[1-9](?: [0-9]?){5,13}[0-9]$)|(^\+[1-9](?:[0-9] ?){5,13}[0-9]$)/g;

I dare you to try and change the {5,13} to {5,14} in the second last pattern group;
OR
Remove the space preceding ‘?){5’
AND
insert a space between ‘?:’ and ‘[0-9]’ in the last pattern group.

These simple edits deliver unexpected and unwanted results; even with careful mouse clicking to identify insertion and deletion points.