如何在允许选择周围文本的同时跳过某些文本？

Question

例如：

<div class="example">
    <span class="selectable">foo</span>
    <span class="unselectable">bar</span>
    <span class="selectable">hello</span>
    <span class="selectable">world</span>
</div>

当从'foo'到'world'（句子或段落）执行鼠标选择时，我希望所选文本为'foo hello world'并跳过'bar'。如何实现这一目标？

css技巧user-select: none似乎不能用于此目的。