Javascript 强制文本选择（突出显示）至少为一个以空格分隔的完整单词

我正在努力使div一次只能突出显示一个单词

例如，从上面的句子中，我可以突出显示/选择

仅突出显示

，但不能选择

仅突出显示

。如果我将鼠标放在

highli

的位置，它可能还没有选择突出显示的

，或者已经选择了整个突出显示的

为了澄清，突出显示/选择是指当你点击一个单词，按住鼠标按钮，然后拖动到文本中的另一个点时会发生什么

我还没有找到任何这样的例子，但我也觉得我以前见过类似的东西。有没有一个简单的方法可以做到这一点，例如一些CSS规则？还是推出一些自定义javascript处理文档选择的唯一方法？
可以通过将每个单词包装到一个span元素中并使用user select:all强制进行元素范围的选择来强制执行单词选择

    <style>
        .word {
            user-select: all;
        }
    </style>

<span class="word">this</span>
<span class="word">test</span>
<span class="word">is</span>
<span class="word">a</span>


.字{
用户选择：全部；
}
这
测试
是
A.

现在手工操作可能会很烦人，因此javascript可以起到解救作用，例如：

<style>
    .word {
        -moz-user-select: all;
        -webkit-user-select: all;
        -ms-user-select: all;
        user-select: all;
    }
</style>

<p class="selected-by-word">Hello this is a text where selection should be word-wide.</p>
<p class="selected-by-word">Another text with word-wide selection.</p>

<script>
    let textToSplit = document.getElementsByClassName('selected-by-word')

    Array.prototype.forEach.call(textToSplit, function (anElement) {
        anElement.innerHTML = anElement.innerHTML.replace(/\w+/g, "<span class='word'>$&</span>")
    })
</script>


.字{
-moz用户选择：全部；
-webkit用户选择：全部；
-ms用户选择：全部；
用户选择：全部；
}
您好这是一个文本，其中的选择范围应为word范围
另一个具有全word选择的文本
让textToSplit=document.getElementsByClassName（'selected-by-word'）
Array.prototype.forEach.call（textToSplit，函数（anElement））{
anElement.innerHTML=anElement.innerHTML.replace（/\w+/g，“$&”）
})

word选择类的所有元素都将设置为word范围的选择。
太好了，非常感谢！为了让它与React&Markdown一起工作，不得不进行一些奇怪的破解，但它的工作原理与我所希望的完全一样：）@EponymeWeb getElementsBy*方法返回HTMLCollections，这可能很难使用。考虑使用QueRealSturTrAOL，它返回静态的NODLIST——不像HTMLCype，它可以直接迭代，在迭代时不会改变，而且它更灵活。代码>文档。查询选择全部（'.按word'选择）。forEach（…