javascript - 强制文本选择(突出显示)至少为一个完整的空格分隔的单词

Question

我正在尝试使 div 一次只能突出显示一个单词。

例如，从上面的句子中，我可以突出显示/选择仅突出显示，但不能仅高亮。如果我将鼠标放在 highli 的位置，它要么还没有选择 highlighted，要么选择了整个 highlighted已经。

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

我还没有找到任何这样的例子，但我也觉得我以前见过类似的东西。有没有一种简单的方法可以做到这一点，例如一些 CSS 规则？或者是推出一些自定义 JavaScript 处理文档选择的唯一方法？

Answer 1

可以通过将每个单词包装到一个 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>

现在手动执行此操作可能会很烦人，因此 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>

所有具有按单词选择类的元素都将设置为全单词选择。