对fillword.js进行了重构

app/static/js/fillword.js

@@ -1,29 +1,36 @@
-isRead = true;
-isChoose = true;
-var reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停
-
+var isRead = true;
+var isChoose = true;
+const reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停
+//获取字符
 function getWord(){
-   var word = window.getSelection?window.getSelection():document.selection.createRange().text;
-   return word;
+   return window.getSelection?window.getSelection():document.selection.createRange().text;
 }
-function fillinWord(){
-   var word = getWord();
+//填充字符
+function fillingWord(){
+   let word = getWord();
    if (isRead) read(word);
    if (!isChoose) return;
-   var element = document.getElementById("selected-words");
+   let element = document.getElementById("selected-words");
    element.value = element.value + " " + word;
 }
-document.getElementById("text-content").addEventListener("click", fillinWord, false);
-function read(s){
-   var msg = new SpeechSynthesisUtterance(s);
+document.getElementById("text-content").addEventListener("click", fillingWord, false);
+//朗读单词
+//@word 要朗读的单词
+function read(word){
+   //关闭当前正在读的单词
+   reader.cancel()
+   //创建新的朗读任务
+   let msg = new SpeechSynthesisUtterance(word);
    reader.speak(msg);
 }
+//关闭正在读的单词
 function onReadClick(){
-    isRead = !isRead;
+    let isRead = !isRead;
     if(!isRead){
        reader.cancel();
     }
 }
+//取消当前选择
 function onChooseClick(){
     isChoose = !isChoose;
 }

app/static/js/highlight.js

@@ -29,9 +29,10 @@ function highLight() {
     if (sel_word1 != null) {
         var list = sel_word1.value.split(" ");
         for (var i = 0; i < list.length; ++i) {
-            list[i] = list[i].replace(/(^\s*)|(\s*$)/g, "");
+            list[i] = list[i].replace(/(^\s*)|(\s*$)/g, "");//消除字符串两边空字符
             if (list[i] != "" && "<mark>".indexOf(list[i]) == -1 && "</mark>".indexOf(list[i]) == -1) {
-                txt = txt.replace(new RegExp(list[i], "g"), "<mark>" + list[i] + "</mark>");
+
+                txt = txt.replace(new RegExp("\\s"+list[i]+"\\s", "g"), " <mark>" + list[i] + "</mark> ");
             }
         }
     }
@@ -40,7 +41,7 @@ function highLight() {
         for (var i = 0; i < list2.length; ++i) {
             list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, "");
             if (list2[i] != "" && "<mark>".indexOf(list2[i]) == -1 && "</mark>".indexOf(list2[i]) == -1) {
-                txt = txt.replace(new RegExp(list2[i], "g"), "<mark>" + list2[i] + "</mark>");
+                txt = txt.replace(new RegExp("\\s"+list2[i]+"\\s", "g"), " <mark>" + list2[i] + "</mark> ");
             }
         }
     }