html Grammarly如何知道红色下划线的位置？

b1zrtrql 于 2023-03-16 发布在其他

关注(0)|答案(1)|浏览(199)

我最近迷上了LanguageTool和Grammarly等工具如何在屏幕上拼写错误的单词上显示红色下划线。我想做一些类似的事情，但在第一次显示单词下划线后，在悬停单词时显示带有同义词等内容的丰富弹出框。
这与浏览器扩展无关，请查看我提供的Grammarly SDK插件和LanguageTool API示例的链接。
我知道Grammarly正在使用带有插槽的Shadow DOM来 Package 文本区域，但我仍然不知道他们如何能够（有效地）确定特定单词在文本区域中的位置。
当我检查它的时候，两个副本都没有显示克隆的HTML，我认为他们可能会这样做，以便将文本分解为标记，他们可以为这些标记获得边界矩形--但似乎不是这样。
使用<grammarly-editor-plugin><textarea></textarea></grammarly-editor-plugin> x1c 0d1x的结果
LanguageTool example:

我尝试使用Canvas API来获取特定单词的维数，但这不足以确定它在文本区域中的位置，因为该单词可能位于比第一行更大的行上。
为了使该方法工作，他们必须获得文本区域中的所有单词，计算它们的维度，并且使用文本区域的维度来确定目标单词在文本区域中的哪一行;连同单词的尺寸，特别是宽度，它们将在文本区域中具有x和y位置。2然而，这似乎太昂贵和缓慢，以至于不能像下划线显示的那样快速完成。
我可以使用contenteditable，只需要将每个单词 Package 在它自己的范围内，但这似乎并不理想。
还有人知道他们还能怎么确定一个词在文本区域中的X和Y位置吗？

Html

来源：https://stackoverflow.com/questions/75710398/how-does-grammarly-know-where-to-position-the-red-underline

1条答案

按热度按时间

62o28rlo1#

你让我很兴奋，但事实证明这并不是一个很大的挑战

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

赞(0）回复(0）举报 2023-03-16

我来回答

html Grammarly如何知道红色下划线的位置？

1条答案

相关问题

热门标签

最新问答