从给定网页内容的字典中查找单词的最佳实践

best practices for finding words from a dictionary given the content on a webpage javascript

本文关键字：单词 最佳 查找 字典 网页内容      更新时间：2023-09-26

你知道那些弹出式广告是怎么运作的吗?当你把鼠标悬停在它们上面时，它们会超级烦人。我想创造类似的东西。

我想做的是给定特定的预先确定的词与给定的"定义"与这些词相关联，就像一个键值对，搜索我的网页上的这些词，然后使这些词，如果点击弹出一个小的工具提示给出这个词的定义，值。

现在我可以把这些拼凑起来了但我想用最有效的方式缓存字典，尽可能多地缓存。这样我就不必每次加载页面时都创建两个数组然后检查页面上的单词是否与字典中的任何内容匹配如果匹配，就会出现工具提示或小弹出框。

谁能给我任何想法，甚至代码提示/链接，以帮助我得到最好的结果/加载时间，所以它不需要永远每次网页加载。

我还没有开始制作，所以我可以选择任何路径，我只想让它快一些

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

接下来，向容器添加一个侦听器，该侦听器带有一个处理程序，仅当e.target是span时才会做出反应。

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) { /* ... */ }
相关文章：