javascript - 根据网页 javascript 的内容从字典中查找单词的最佳实践

Question

就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放， visit the help center以获得指导。

已关闭 11 年前。

你知道那些弹出广告是如何运作的吗？当你将鼠标悬停在它们上方时，它们会非常烦人。我想创造类似的东西。

我想要做的是给定特定的预先确定的单词以及与这些单词关联的给定“定义”，例如键值对，在我的网页中搜索这些单词，然后在单击时使这些单词弹出一点工具提示给出了该词的定义和值。

现在我可以将其拼凑在一起，但我想以最有效的方式来缓存字典并尽可能多地缓存。因此，我不必在每次加载页面时创建两个数组，然后检查页面上的单词是否与字典中的任何内容匹配，如果匹配，则制作一个工具提示或小弹出窗口。

任何人都可以给我任何想法，甚至代码提示/链接来帮助我获得最佳结果/加载时间，这样每次加载网页就不会花费很长时间。

我还没有开始制作任何东西，所以我可以走任何路线，我只是希望它能快点。

Answer 1

获取文本容器元素并按单词split(' ')它的内容。迭代这个单词数组，并用 span 或其他元素包装字典中的单词。然后，join(' ') 返回数组并用它替换容器的 innerHTML。

接下来，向容器添加一个监听器，其中的处理程序仅当 e.target 是 span 时才会使用react。

container.addEventListenter('click', function (e) {
    if ('SPAN' === e.target.tagName) {
        lookUpWord(e.target)
    }
}, false)

函数lookUpWord将分析span的文本并绘制​​查找的定义。

至于字典的格式，最好是一个简单的 JSON 对象，就像这样:

var dictionary = {
    "astrolabe": "An astronomical and navigational instrument for gauging the altitude of the Sun and stars.",
    "logarithm": "For a number x, the power to which a given base number must be raised in order to obtain x.",
    "Darth Vader": "Lover, warrior, Dark Lord of the Sith."
}

在这样的对象中查找将是微不足道的:

 var word = 'Darth Vader'
 var definition = dictionary[word]

检查单词是否在字典中:

if (word in dictionary) { /* ... */ }