在线翻译纯前端+百度翻译API+localStorage本地存储完成文本中生词的提取并返回单词的翻译结果项目内容前背单词时,发现直接背单词太枯燥,直接看英文书报,不认识的单词太多,所以想做个demo,直接查英文课本生词,并翻译它。该演示具有以下内容。前端界面使用localStorage存储用户已经掌握的单词。百度翻译API用于翻译单词。项目演示不需要服务器。写玩静态资源后,可以直接托管在GitHubPage上(GitHub真是一个很棒的网站)在线地址操作演示:(无法加载GIF,可以自行打开此链接)代码逻辑代码仓库当前项目处于起步阶段,所以比较简单,还有很多未添加的功能目录结构。├──README.md├──css│└──style.css├──index.html└──js├──getTrans.js├──getVocabulariesFromText.js└──static├──jQuery.min。js└──md5.js其中js/static目录下一个提供jQuery,另一个用于百度翻译需要的MD5加密的localStorage。从项目网站所在的便利贴打开控制台,观察localStorage,将所有单词分为known、learning和unknown。并将已知单词存储在localStorage中。这样做的好处是不需要服务器,缺点是用户换浏览器之前的内容就没有了用于显示翻译结果的表格的js代码流绑定了页面的onClick时间提交按钮。当用户点击提交按钮时,获取输入框中的文本。使用正则表达式提取其中的英文单词。对提取的单词执行两个过程以删除重复项。删除已经学过的单词。使用百度翻译API翻译单词,并将返回结果渲染到页面仓库。代码都有注释,我就不废话了。
