Keyboard arrow navigation should not consider hidden special characters

Question

I have created an example here http://jsfiddle.net/8y36phcz/2/ to show the scenario.

In this I have a special character dot(.) in the HTML. In the output it is not visible. Now when I use the keyboard left and right arrow to navigate, I want to skip the dot(.) and go to next/previous position. Right now the dot(.) is not visible in the output but still the keyboard arrows keys are counting it and need two times left/right key press to move to the next position.

Is it possible to do it in such a way that the keyboard does not consider this dot(.) and move to the next character? Please check in Chrome.

Answer 1

I was able to put together some ideas from different posts though not very efficient. Hope its helps someone with the same problem. I have created the working example here http://jsfiddle.net/tjjgukLp/1/.