无后端完成在线翻译功能

Jason 发布于2019-08-02 10:17 / 2620人阅读

摘要：在线翻译纯前端百度翻译本地存储完成提取文本中的生词，并返回单词的翻译结果项目内容之前背单词的时候发现，直接背单词的话太枯燥，直接阅读英文书籍报纸又有太多的单词不认识，就想能够做个，直接检查出一个英文文本中的生词，并翻译出来。

在线翻译

纯前端 + 百度翻译API + localStorage本地存储
完成提取文本中的生词，并返回单词的翻译结果

项目内容

之前背单词的时候发现，直接背单词的话太枯燥，直接阅读英文书籍、报纸又有太多的单词不认识，
就想能够做个demo，直接检查出一个英文文本中的生词，并翻译出来。

本demo有下列内容

前端界面

用localStorage存储用户已近掌握的单词

利用百度翻译API翻译单词

项目演示

所以项目本身不需要服务器，编写玩静态资源后可以直接托管在GitHub Page上（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

我把把所有单词分为已知know，正在学习learn和未知。并把已知的单词存储在localStorage。
这样做的好处是不需要服务器，坏处是用户换个浏览器之前的内容就没了

前端页面

分为三个部分：

输入框，用来等待用户输入文本

提交按钮，点击后开始翻译文本框中的内容

用来显示翻译结果的表格

js代码流程

为提交按钮绑定onClick时间

当用户点击提交按钮后

获得输入框中的文本

用正则表达式提取其中的英语单词

对提取到的单词做两个处理

去除重复的单词

去除已经学会的单词

利用百度翻译API翻译单词

将返回的结果渲染到页面

仓库的代码都有注释，就不多说废话了

结语

项目还很简陋，有时间再完善下。

GPU云服务器云服务器监控云服务器完成在线注册 asp无后门大马 linux无后门ddos集群 linux无后门集群ddos

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52255.html

无后端完成在线翻译功能

摘要：在线翻译纯前端百度翻译本地存储完成提取文本中的生词，并返回单词的翻译结果项目内容之前背单词的时候发现，直接背单词的话太枯燥，直接阅读英文书籍报纸又有太多的单词不认识，就想能够做个，直接检查出一个英文文本中的生词，并翻译出来。在线翻译纯前端 + 百度翻译API + localStorage本地存储完成提取文本中的生词，并返回单词的翻译结果项目内容之前背单词的时候发现，直接背单词的...

RaoMeng 2019-08-22 16:48 评论0 收藏0
基于vue2 + muse-ui构建的移动端、PC端轻社区项目 F-Rent 友租

摘要：如果有什么可以帮到你的无论是不是此项目中的问题都可以在提出我会尽我所能帮你解决欢迎大佬们提出好的问题和点子，我会第一时间去修正。前言本项目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack构建的一个移动端、PC端轻社区项目项目地址GitHub 项目更新历史开发环境 Macos + Vs code + Chrome 项目的灵感最初来源：由于我是一个宅男在...

linkFly 2019-08-21 16:54 评论0 收藏0
基于vue2 + muse-ui构建的移动端、PC端轻社区项目 F-Rent 友租

摘要：如果有什么可以帮到你的无论是不是此项目中的问题都可以在提出我会尽我所能帮你解决欢迎大佬们提出好的问题和点子，我会第一时间去修正。前言本项目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack构建的一个移动端、PC端轻社区项目项目地址GitHub 项目更新历史开发环境 Macos + Vs code + Chrome 项目的灵感最初来源：由于我是一个宅男在...

X_AirDu 2019-08-30 15:53 评论0 收藏0
4月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享关于的思考一款有趣的动画效果跨站资源共享之二最流行的编程语言能做什么到底什么是闭包的第三个参数跨域资源共享详解阮一峰前端要给力之语句在中的值周爱民中国第二届视频花絮编码规范前端工程师手册奇舞周刊被忽视的更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfron...

jsdt 2019-08-20 15:54 评论0 收藏0