Double-click the JavaScript word window.getSelection in the two INS tags

Question

My HTML:

<p><ins data-id="1">111</ins><ins data-id="2">222</ins></p> 

The output of this code is:

If I double-click a word, it will select the full word, for example:

But I want to select letters based on the INS data-id tag

Example: - if I double-clicked 111 , I want to select only 111 as follows:

How to change default double-click selection for JavaScript selection?

I tried the following code:

 var containerid = $(e.currentTarget); if (window.getSelection) { var range = document.createRange(); range.selectNode(containerid); var sel = window.getSelection() sel.removeAllRanges(); sel.addRange(range); } 

But it does not work as expected.

Answer 1

 <p><ins data-id="1">111</ins>&#8203;<ins data-id="2">222</ins></p> 

You can simply put a zero-width space between them: ​