title: How to skip certain text while allowing selection for surrounding text?
body: <p>For example:</p>
  
  <pre><code>&lt;div class="example"&gt;
      &lt;span class="selectable"&gt;foo&lt;/span&gt;
      &lt;span class="unselectable"&gt;bar&lt;/span&gt;
      &lt;span class="selectable"&gt;hello&lt;/span&gt;
      &lt;span class="selectable"&gt;world&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When performing mouse selection from 'foo' to 'world' (a sentence or paragraph), I want the selected text to be <code>'foo hello world'</code> with <code>'bar'</code> skipped. How this may be accomplished?</p>
  
  <p>The css trick <code>user-select: none</code> doesn't seem to work for this purpose. </p>