迫使文本选择(亮点)至少是一个完整的空格划分的单词

Question

我正在尝试制作它，以便一次只能突出显示一个单词。

因此，例如，从上面的句子中，我可以突出显示/选择only be highlighted，而不是only be highli。如果我将鼠标放在highli的位置，它要么还没有选择highlighted，要么已经选择了整个highlighted。

澄清，通过突出显示/选择我是指单击单词时会发生什么，按下鼠标按钮，然后拖动到文本中的另一点。

我找不到任何例子，但是我也觉得我以前看过类似的东西。是否有一种简单的方法来执行此操作，例如某些CSS规则？还是推出一些自定义JavaScript处理文档的唯一方法？

Answer 1

可以通过将每个单词包裹到跨度元素中并使用用户选择来强制执行：所有这些都可以强制元素宽选择，以实例

    <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>

现在，这可能会烦人，因此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>

所有在单词范围的选择中都设置了所有具有逐字的元素。