From 1dfe370983a7a8112b278f5bfce5fd5587104c49 Mon Sep 17 00:00:00 2001 From: Lan Hui <1348141770@qq.com> Date: Tue, 2 Aug 2022 11:39:35 +0800 Subject: [PATCH 1/6] Use better variable names --- app/static/js/highlight.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/app/static/js/highlight.js b/app/static/js/highlight.js index 008f71e..b026e06 100644 --- a/app/static/js/highlight.js +++ b/app/static/js/highlight.js @@ -23,10 +23,10 @@ function getWord() { function highLight() { if (!isHighlight) return; let txt = document.getElementById("article").innerText; - let sel_word1 = document.getElementById("selected-words"); - let sel_word2 = document.getElementById("selected-words2"); - if (sel_word1 != null) { - const list = sel_word1.value.split(" "); + let picked_words = document.getElementById("selected-words"); + let dictionary_words = document.getElementById("selected-words2"); + if (picked_words != null) { + const list = picked_words.value.split(" "); for (let i = 0; i < list.length; ++i) { list[i] = list[i].replace(/(^\s*)|(\s*$)/g, ""); //消除字符串两边空字符 if (list[i] !== "" && "".indexOf(list[i]) === -1 && "".indexOf(list[i]) === -1) { @@ -35,8 +35,8 @@ function highLight() { } } } - if (sel_word2 != null) { - const list2 = sel_word2.value.split(" "); + if (dictionary_words != null) { + const list2 = dictionary_words.value.split(" "); for (let i = 0; i < list2.length; ++i) { list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, ""); if (list2[i] !== "" && "".indexOf(list2[i]) === -1 && "".indexOf(list2[i]) === -1) { @@ -49,11 +49,11 @@ function highLight() { } function cancel_highLight() { - const list = sel_word1.value.split(" "); + const list = picked_words.value.split(" "); let txt = document.getElementById("article").innerText; - let sel_word1 = document.getElementById("selected-words"); - const sel_word2 = document.getElementById("selected-words2"); - if (sel_word1 != null) { + let picked_words = document.getElementById("selected-words"); + const dictionary_words = document.getElementById("selected-words2"); + if (picked_words != null) { for (let i = 0; i < list.length; ++i) { list[i] = list[i].replace(/(^\s*)|(\s*$)/g, ""); if (list[i] !== "") { @@ -61,10 +61,10 @@ function cancel_highLight() { } } } - if (sel_word2 != null) { - let list2 = sel_word1.value.split(" "); + if (dictionary_words != null) { + let list2 = picked_words.value.split(" "); for (let i = 0; i < list2.length; ++i) { - list2 = sel_word2.value.split(" "); + list2 = dictionary_words.value.split(" "); list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, ""); if (list2[i] !== "") { txt = txt.replace("" + list[i] + "", "list[i]"); -- 2.17.1 From 47e745e7742658c10c4b201b92719e690fd35b27 Mon Sep 17 00:00:00 2001 From: Lan Hui <1348141770@qq.com> Date: Tue, 2 Aug 2022 11:45:21 +0800 Subject: [PATCH 2/6] Use better variable name (use articleContent instead of txt, and use camelCase) --- app/static/js/highlight.js | 42 +++++++++++++++++++------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/app/static/js/highlight.js b/app/static/js/highlight.js index b026e06..9febbc7 100644 --- a/app/static/js/highlight.js +++ b/app/static/js/highlight.js @@ -22,56 +22,56 @@ function getWord() { function highLight() { if (!isHighlight) return; - let txt = document.getElementById("article").innerText; - let picked_words = document.getElementById("selected-words"); - let dictionary_words = document.getElementById("selected-words2"); - if (picked_words != null) { - const list = picked_words.value.split(" "); + let articleContent = document.getElementById("article").innerText; + let pickedWords = document.getElementById("selected-words"); // words picked to the text area + let dictionaryWords = document.getElementById("selected-words2"); // words appearing in the user's new words list + if (pickedWords != null) { + const list = pickedWords.value.split(" "); for (let i = 0; i < list.length; ++i) { list[i] = list[i].replace(/(^\s*)|(\s*$)/g, ""); //消除字符串两边空字符 if (list[i] !== "" && "".indexOf(list[i]) === -1 && "".indexOf(list[i]) === -1) { //将正则表达式进行修改 表示搜索的是两端带有空格的list[i] 那么搜索的便为一个完整单词 然后在mark标签的前后各加了一个空格对其进行替换 - txt = txt.replace(new RegExp("\\s"+list[i]+"\\s", "g"), " " + list[i] + " "); + articleContent = articleContent.replace(new RegExp("\\s"+list[i]+"\\s", "g"), " " + list[i] + " "); } } } - if (dictionary_words != null) { - const list2 = dictionary_words.value.split(" "); + if (dictionaryWords != null) { + const list2 = dictionaryWords.value.split(" "); for (let i = 0; i < list2.length; ++i) { list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, ""); if (list2[i] !== "" && "".indexOf(list2[i]) === -1 && "".indexOf(list2[i]) === -1) { //将正则表达式进行修改 表示搜索的是两端带有空格的list2[i] 那么搜索的便为一个完整单词 然后在mark标签的前后各加了一个空格对其进行替换 - txt = txt.replace(new RegExp("\\s"+list2[i]+"\\s", "g"), " " + list2[i] + " "); + articleContent = articleContent.replace(new RegExp("\\s"+list2[i]+"\\s", "g"), " " + list2[i] + " "); } } } - document.getElementById("article").innerHTML = txt; + document.getElementById("article").innerHTML = articleContent; } function cancel_highLight() { - const list = picked_words.value.split(" "); - let txt = document.getElementById("article").innerText; - let picked_words = document.getElementById("selected-words"); - const dictionary_words = document.getElementById("selected-words2"); - if (picked_words != null) { + const list = pickedWords.value.split(" "); + let articleContent = document.getElementById("article").innerText; + let pickedWords = document.getElementById("selected-words"); + const dictionaryWords = document.getElementById("selected-words2"); + if (pickedWords != null) { for (let i = 0; i < list.length; ++i) { list[i] = list[i].replace(/(^\s*)|(\s*$)/g, ""); if (list[i] !== "") { - txt = txt.replace("" + list[i] + "", "list[i]"); + articleContent = articleContent.replace("" + list[i] + "", "list[i]"); } } } - if (dictionary_words != null) { - let list2 = picked_words.value.split(" "); + if (dictionaryWords != null) { + let list2 = pickedWords.value.split(" "); for (let i = 0; i < list2.length; ++i) { - list2 = dictionary_words.value.split(" "); + list2 = dictionaryWords.value.split(" "); list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, ""); if (list2[i] !== "") { - txt = txt.replace("" + list[i] + "", "list[i]"); + articleContent = articleContent.replace("" + list[i] + "", "list[i]"); } } } - document.getElementById("article").innerHTML = txt; + document.getElementById("article").innerHTML = articleContent; } function fillInWord() { -- 2.17.1 From b5dacb9ad21a932c80d891d208184606dcc8ec7b Mon Sep 17 00:00:00 2001 From: Lan Hui <1348141770@qq.com> Date: Tue, 2 Aug 2022 11:52:40 +0800 Subject: [PATCH 3/6] Improve comments --- app/static/js/highlight.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/static/js/highlight.js b/app/static/js/highlight.js index 9febbc7..1c7d4fb 100644 --- a/app/static/js/highlight.js +++ b/app/static/js/highlight.js @@ -28,9 +28,9 @@ function highLight() { if (pickedWords != null) { const list = pickedWords.value.split(" "); for (let 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] !== "" && "".indexOf(list[i]) === -1 && "".indexOf(list[i]) === -1) { - //将正则表达式进行修改 表示搜索的是两端带有空格的list[i] 那么搜索的便为一个完整单词 然后在mark标签的前后各加了一个空格对其进行替换 + //将文章中所有出现该单词word的地方改为：" " + word + " "。 正则表达式RegExp()中，"\\s"代表单词前后必须要有空格，以防止只对单词中的部分字符高亮的情况出现。 articleContent = articleContent.replace(new RegExp("\\s"+list[i]+"\\s", "g"), " " + list[i] + " "); } } @@ -40,7 +40,6 @@ function highLight() { for (let i = 0; i < list2.length; ++i) { list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, ""); if (list2[i] !== "" && "".indexOf(list2[i]) === -1 && "".indexOf(list2[i]) === -1) { - //将正则表达式进行修改 表示搜索的是两端带有空格的list2[i] 那么搜索的便为一个完整单词 然后在mark标签的前后各加了一个空格对其进行替换 articleContent = articleContent.replace(new RegExp("\\s"+list2[i]+"\\s", "g"), " " + list2[i] + " "); } } -- 2.17.1 From 8cb34e56ba752bab2a18d1f33a3beb2ee5e74363 Mon Sep 17 00:00:00 2001 From: Lan Hui <1348141770@qq.com> Date: Tue, 2 Aug 2022 12:26:18 +0800 Subject: [PATCH 4/6] Refactor: remove duplicate code block --- app/static/js/highlight.js | 24 +++++++----------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/app/static/js/highlight.js b/app/static/js/highlight.js index 1c7d4fb..8a48cd9 100644 --- a/app/static/js/highlight.js +++ b/app/static/js/highlight.js @@ -25,23 +25,13 @@ function highLight() { let articleContent = document.getElementById("article").innerText; let pickedWords = document.getElementById("selected-words"); // words picked to the text area let dictionaryWords = document.getElementById("selected-words2"); // words appearing in the user's new words list - if (pickedWords != null) { - const list = pickedWords.value.split(" "); - for (let i = 0; i < list.length; ++i) { - list[i] = list[i].replace(/(^\s*)|(\s*$)/g, ""); //消除单词两边的空字符 - if (list[i] !== "" && "".indexOf(list[i]) === -1 && "".indexOf(list[i]) === -1) { - //将文章中所有出现该单词word的地方改为：" " + word + " "。 正则表达式RegExp()中，"\\s"代表单词前后必须要有空格，以防止只对单词中的部分字符高亮的情况出现。 - articleContent = articleContent.replace(new RegExp("\\s"+list[i]+"\\s", "g"), " " + list[i] + " "); - } - } - } - if (dictionaryWords != null) { - const list2 = dictionaryWords.value.split(" "); - for (let i = 0; i < list2.length; ++i) { - list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, ""); - if (list2[i] !== "" && "".indexOf(list2[i]) === -1 && "".indexOf(list2[i]) === -1) { - articleContent = articleContent.replace(new RegExp("\\s"+list2[i]+"\\s", "g"), " " + list2[i] + " "); - } + let allWords = pickedWords.value + " " + dictionaryWords.value; + const list = allWords.split(" "); + for (let i = 0; i < list.length; ++i) { + list[i] = list[i].replace(/(^\s*)|(\s*$)/g, ""); //消除单词两边的空字符 + if (list[i] !== "" && "".indexOf(list[i]) === -1 && "".indexOf(list[i]) === -1) { + //将文章中所有出现该单词word的地方改为：" " + word + " "。 正则表达式RegExp()中，"\\s"代表单词前后必须要有空格，以防止只对单词中的部分字符高亮的情况出现。 + articleContent = articleContent.replace(new RegExp("\\s"+list[i]+"\\s", "g"), " " + list[i] + " "); } } document.getElementById("article").innerHTML = articleContent; -- 2.17.1 From 1d8671c5c78768c29dab349670cbcbbb88f5fda5 Mon Sep 17 00:00:00 2001 From: Lan Hui <1348141770@qq.com> Date: Tue, 2 Aug 2022 12:30:27 +0800 Subject: [PATCH 5/6] Refactor: use better function name --- app/static/js/highlight.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/static/js/highlight.js b/app/static/js/highlight.js index 8a48cd9..625fdc0 100644 --- a/app/static/js/highlight.js +++ b/app/static/js/highlight.js @@ -1,7 +1,7 @@ let isHighlight = true; function cancelBtnHandler() { - cancel_highLight(); + cancelHighlighting(); document.getElementById("text-content").removeEventListener("click", fillInWord, false); document.getElementById("text-content").removeEventListener("touchstart", fillInWord, false); document.getElementById("text-content").addEventListener("click", fillInWord2, false); @@ -37,11 +37,11 @@ function highLight() { document.getElementById("article").innerHTML = articleContent; } -function cancel_highLight() { - const list = pickedWords.value.split(" "); +function cancelHighlighting() { let articleContent = document.getElementById("article").innerText; let pickedWords = document.getElementById("selected-words"); - const dictionaryWords = document.getElementById("selected-words2"); + const dictionaryWords = document.getElementById("selected-words2"); + const list = pickedWords.value.split(" "); if (pickedWords != null) { for (let i = 0; i < list.length; ++i) { list[i] = list[i].replace(/(^\s*)|(\s*$)/g, ""); @@ -68,13 +68,13 @@ function fillInWord() { } function fillInWord2() { - cancel_highLight(); + cancelHighlighting(); } function ChangeHighlight() { if (isHighlight) { isHighlight = false; - cancel_highLight(); + cancelHighlighting(); } else { isHighlight = true; highLight(); -- 2.17.1 From ecc354bc0dc4e0b1fb0fc3845da8f54c34bd7ed7 Mon Sep 17 00:00:00 2001 From: Lan Hui <1348141770@qq.com> Date: Tue, 2 Aug 2022 12:33:41 +0800 Subject: [PATCH 6/6] Refactor: use better function --- app/static/js/highlight.js | 3 +-- app/templates/userpage_get.html | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/static/js/highlight.js b/app/static/js/highlight.js index 625fdc0..1003918 100644 --- a/app/static/js/highlight.js +++ b/app/static/js/highlight.js @@ -71,14 +71,13 @@ function fillInWord2() { cancelHighlighting(); } -function ChangeHighlight() { +function toggleHighlighting() { if (isHighlight) { isHighlight = false; cancelHighlighting(); } else { isHighlight = true; highLight(); - } } diff --git a/app/templates/userpage_get.html b/app/templates/userpage_get.html index be503e6..9e3891b 100644 --- a/app/templates/userpage_get.html +++ b/app/templates/userpage_get.html @@ -38,7 +38,7 @@

阅读文章并回答问题

{{ today_article|safe }}
- 生词高亮 + 生词高亮 大声朗读 划词入库
-- 2.17.1