点击span内文本时获取点击的单个单词（现有代码无效）

需求：点击页面文本时，仅获取点击的单个单词（比如点击“mother”时，控制台仅输出“mother”，即便该单词和其他单词在同一个span标签内）。当前使用的JavaScript代码无法实现预期效果，甚至无法选中span内的文本，相关代码如下：

现有JavaScript代码 #

function getSelectedText(e) {

    if(window.getSelection)
        return console.log(window.getSelection().toString());
    else if(document.getSelection)
        return console.log(document.getSelection());
    else if(document.selection)
        return console.log(document.selection.createRange().text);
    return console.log("");
    
}

document.body.onmouseup = getSelectedText;

现有HTML代码 #

<div class="destination">
  <span class="word">sister mother</span>
  <span class="word">brother</span>
  <span class="word">father</span>
</div>

<h1>hi</h1>

解决方案 #

原代码依赖用户手动选中文本，不符合“点击即获取单个单词”的需求。以下是两种可行实现方案：

方案一：利用浏览器原生选择API #

通过Range和Selection对象定位点击位置的单词边界，提取目标单词：

function getClickedWord(e) {
    const selection = window.getSelection();
    // 将光标定位到点击元素的末尾
    selection.collapse(e.target, e.target.childNodes.length);
    // 光标向后移动一个单词，定位单词起始位置
    selection.modify('move', 'backward', 'word');
    const startRange = selection.getRangeAt(0);
    // 光标向前移动一个单词，定位单词结束位置
    selection.modify('move', 'forward', 'word');
    const endRange = selection.getRangeAt(0);
    // 提取单词文本
    const clickedWord = endRange.toString();
    // 清除页面上的选中高亮状态
    selection.removeAllRanges();
    console.log(clickedWord);
}

document.body.onmouseup = getClickedWord;

方案二：通过文本宽度计算定位单词 #

先获取点击元素的文本内容，再根据点击位置的坐标计算对应的单词：

function getClickedWord(e) {
    const text = e.target.textContent;
    const rect = e.target.getBoundingClientRect();
    // 计算点击位置在元素内的水平偏移量
    const clickOffset = e.clientX - rect.left;
    // 按空格分割所有单词
    const words = text.split(/\s+/);
    let currentOffset = 0;
    const elementStyle = getComputedStyle(e.target);

    for (const word of words) {
        // 计算当前单词和空格的宽度
        const wordWidth = getTextWidth(word, elementStyle);
        const spaceWidth = getTextWidth(' ', elementStyle);
        // 判断点击位置是否在当前单词的范围内
        if (clickOffset >= currentOffset && clickOffset <= currentOffset + wordWidth) {
            console.log(word);
            return;
        }
        currentOffset += wordWidth + spaceWidth;
    }
}

// 辅助函数：计算指定文本的渲染宽度
function getTextWidth(text, style) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    context.font = `${style.fontSize} ${style.fontFamily}`;
    return context.measureText(text).width;
}

document.body.onmouseup = getClickedWord;

方案对比 #

• 方案一：依赖浏览器原生API，代码简洁，兼容性较好，无需处理字体样式细节
• 方案二：通过坐标计算定位，可自定义单词分割规则，但需适配不同字体样式的宽度计算

内容的提问来源于stack exchange，提问作者SOmeon