在 JavaScript 中获取点击的字符？

Question

我正在尝试编写一个 chrome 扩展，当您（例如）按住 ctrl+单击一个字符时，它会生成一个简单的弹出窗口（这是一个帮助记住日语汉字关键字的简单工具）。

这是我迄今为止的尝试 -

alert()

只是一个占位符，可以快速向我展示我所看到的内容：

document.addEventListener("click", (event) => {
    if (event.ctrlKey) {
        let selection = document.getSelection();
        if (selection.rangeCount == 1) {
            let letter = selection.focusNode.data[selection.focusOffset];

            alert(letter);
        }
    }
});

这有时会得到正确的字符 - 例如在这篇文章上，在文章的开头（橙色字符，

石川県...

），它将使前两个（

石

和

川

）正确，但显示第三个（即

undefined

）应该是

県

）。这是一个片段：

document.addEventListener("click", (event) => {
    if (event.ctrlKey) {
        let selection = document.getSelection();
        if (selection.rangeCount == 1) {
            let letter = selection.focusNode.data[selection.focusOffset];
            console.log(letter);
        }
    }
});

<p><span class="colorL"><ruby>石川県<rt>いしかわけん</rt></ruby><ruby>七尾市<rt>ななおし</rt></ruby></span><span class="colorB">で</span><span class="colorB">、</span><span class="color4"><ruby>先月<rt>せんげつ</rt></ruby></span><span class="colorB">の</span><span class="color3"><ruby>地震<rt>じしん</rt></ruby></span><span class="colorB">の</span><span class="color4">あと</span><span class="color1"><ruby><span class="under">避難</span><rt>ひなん</rt></ruby></span><span class="colorB">を</span><span class="color3"><ruby>続<rt>つづ</rt></ruby>け</span><span class="colorB">て</span><span class="color4">い</span><span class="colorB">る</span><span class="color4"><ruby>人<rt>ひと</rt></ruby></span><span class="colorB">の</span><span class="color3">ため</span><span class="colorB">に</span><span class="colorB">、</span><span class="colorC"><ruby>韓国大使館<rt>かんこくたいしかん</rt></ruby></span><span class="colorB">の</span><span class="color4"><ruby>人<rt>ひと</rt></ruby></span><span class="colorB">や</span><span class="colorL"><ruby>日本<rt>にっぽん</rt></ruby></span><span class="colorB">に</span><span class="color4"><ruby>住<rt>す</rt></ruby>ん</span><span class="colorB">で</span><span class="color4">いる</span><span class="color4"><ruby>韓国人<rt>かんこくじん</rt></ruby></span><span class="colorB">などが</span><span class="color4"><ruby>料理<rt>りょうり</rt></ruby></span><span class="colorB">を</span><span class="color4"><ruby>作<rt>つく</rt></ruby>り</span><span class="colorB">ました</span><span class="colorB">。</span></p>

如果我记录这些值，我可以看到我正在使用的索引 (

selection.focusOffset

) 根本超出了它所获取的数据 (

selection.focusNode.data

) 的范围。我可以看到还有另外三对

*offset

/

*Node.data

，但它们似乎都包含相同的信息，所以我不知道哪一对是“正确的”，也不知道它们何时会不同。

如何可靠地获取被点击的角色？

Answer 1

selection.focusOffset 可能指向字符串中的错误索引。一种可能的解决方案是直接从单击元素的文本内容中获取字符，而不是依赖选择 API。

document.addEventListener("click", (event) => {
    if (event.ctrlKey) {
        let targetElement = event.target;
        if (targetElement.nodeType === Node.TEXT_NODE) {
            let letter = targetElement.textContent.trim();
            if (letter.length === 1) {
                alert(letter);
            }
        }
    }
});