Make default double click behavior treat zero width spaces as word characters

Question

I have an html page where some words are split by  so they look e.g. like FRigVMExternalVariable but in the code they are actually FRigVMExternalVariable. And the problem is that when I click the word it selects only a part that is bordered by  while the desirable behavior is for it to select the whole word

How to override default double click behavior in JS so it would treat  not as a word boundary?

score 1 · Answer 1 · answered Oct 27 '22 at 16:58

1

You can triple-click to select the entire line/paragraph. Otherwise,  is a word separator as explained in this question, so the default browser action on double click is to select the word under the cursor.

<!DOCTYPE html>
<html lang='pt-br'>
<head>
<title>Teste</title>
</head>
<body>
a&#8203;better&#8203;test with spaces<br>
a&#8203;better&#8203;test with spaces<br>

</body>
</html>

answered Oct 27 '22 at 16:58

Niloct

9,491
3
44
57

1

Thank you for the explanation, but it doesn't answer the question of how to override default double click behavior so it would treat `` not as a word boundary. Mb the question wasn't stated clearly enough. I'll update it – wcobalt Oct 27 '22 at 17:04
Javascript. You can use the `event.detail` property of a `click` event handler to capture double-clicks in this handler. Then you can fiddle with answers like this one: https://stackoverflow.com/a/2838358/152016 but I've failed to create a version that can work with text nodes instead of document ones (meaning you would have to enclose each "word" you would like to join with a tag, and then extend the range with `Range.selectNodeContents`). – Niloct Oct 27 '22 at 17:27

wcobalt · Answer 2 · 2022-10-27T20:10:34.693

1

I found a solution which preserves the ability for a word to be soft-broken at specific positions but doesn't interfere with selection. It's tag </wbr>. When I replace  on </wbr> the word can be soft broken at the </wbr>s but when I click any part of a word the whole word gets selected.

F<wbr/>Rig<wbr/>V<wbr/>M<wbr/>External<wbr/>Variable<wbr/>

edited Oct 27 '22 at 20:10

answered Oct 27 '22 at 18:01

wcobalt

312
1
5
17

Amazing! Well done man! – Niloct Oct 27 '22 at 18:50

zer00ne · Answer 3 · 2022-10-27T17:48:34.893

If you don't need zero width spaces, you should just remove them using .replace() and the regex flag \u which enables Regex methods to recognize Unicode. The Unicode for a zero width space is: U+200B which in the land of JavaScript is: \u200B.

function noZero(string) {
  return string.replace(/\u200B/gu, '');
}

const str = document.querySelector(".zero").innerHTML;

const result = noZero(str);

document.querySelector(".clean").insertAdjacentHTML("beforeend", result);

<p class="zero">Try <u>selecting</u> the underlined word.</p>

<p class="clean"></p>

Make default double click behavior treat zero width spaces as word characters

3 Answers3