我最近对 LanguageTool 和 Grammarly 等工具如何在屏幕上拼写错误的单词上显示红色下划线感到着迷。我想做类似的事情，但首先在单词上显示下划线后，在单词悬停时显示丰富的弹出窗口，其中包含同义词之类的内容。
This is not about browser extensions. See the links I've included to Grammarly's SDK plugins & LanguageTool's API examples.
我知道 Grammarly 使用带槽的 Shadow DOM 来包裹文本区域，但我仍然不知道他们如何(有效地)确定文本区域中特定单词的位置。 LanguageTool 不使用 Shadow DOM。
当我检查它时，它们都不会显示克隆的 HTML，我认为他们可能是为了将文本分解为可以获取边界矩形的标记 - 但事实似乎并非如此。
使用 <grammarly-editor-plugin><textarea></textarea></grammarly-editor-plugin> 的结果
我尝试使用 Canvas API获取特定单词的尺寸，但这不足以确定它在文本区域中的位置，因为该单词可能位于比第一行更大的行上。
为了使这种方法发挥作用，他们必须获取文本区域中的所有单词，计算它们的维度，并使用文本区域的维度来确定目标单词在文本区域中的哪一行；连同单词的尺寸(特别是宽度)，它们将在文本区域内具有 x 和 y 位置。然而，这似乎过于昂贵且缓慢，无法像他们的下划线所显示的那样快地实现。
我可以通过将每个单词包装在自己的范围内来使用 contenteditable，但这似乎不太理想。
还有其他人知道如何确定文本区域中单词的 X 和 Y 位置吗？
最佳答案
你让我兴奋不已，但这并不是一个很大的挑战! :(
<!DOCTYPE html>
<head>
<style>
u{color:red;}
.con{width:500px; height:100px; border:1px solid black;}
</style>
</head>
<body>
<script>
const Correct=['Once','upon','a','time','there','were','three','little','pigs'];
function CheckSpelling(){
var S=Con.innerHTML.replace(/<u\>/g,'').replace(/<\/u\>/g,'');
var A=S.split(' ');
for(let i=0; i<A.length; i++){
if(Correct.includes(A[i])===false){A[i]='<u>'+A[i]+'</u>';}
} Con.innerHTML=A.join(' ');}
</script>
Change the words below and click spellcheck...<br><br>
<div id="Con" class="con" spellcheck="false" contenteditable="true">Once upon a time there were three little pigs</div>
<br>
<button onclick="CheckSpelling();">Check Spelling</button>
<br><br>
NB: Optionally you can automate the spellcheck by adding a oninput="CheckSpelling();" to the container.
</body>
</html>
关于javascript - Grammarly 如何知道红色下划线的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/75710398/