在線翻譯

純前端 + 百度翻譯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翻譯單詞
• 將返回的結果渲染到頁面

倉庫的代碼都有注釋，就不多說廢話了

結語

項目還很簡陋，有時間再完善下。

總結

以上是生活随笔為你收集整理的无后端完成在线翻译功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。