diff --git a/app/static/js/highlight.js b/app/static/js/highlight.js index 008f71e..1003918 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); @@ -22,56 +22,45 @@ 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(" "); - 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] + " "); - } + 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 + 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] + " "); } } - if (sel_word2 != null) { - const list2 = sel_word2.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] + " "); - } - } - } - document.getElementById("article").innerHTML = txt; + document.getElementById("article").innerHTML = articleContent; } -function cancel_highLight() { - const list = sel_word1.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) { +function cancelHighlighting() { + let articleContent = document.getElementById("article").innerText; + let pickedWords = document.getElementById("selected-words"); + 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, ""); if (list[i] !== "") { - txt = txt.replace("" + list[i] + "", "list[i]"); + articleContent = articleContent.replace("" + list[i] + "", "list[i]"); } } } - if (sel_word2 != null) { - let list2 = sel_word1.value.split(" "); + if (dictionaryWords != null) { + let list2 = pickedWords.value.split(" "); for (let i = 0; i < list2.length; ++i) { - list2 = sel_word2.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() { @@ -79,17 +68,16 @@ function fillInWord() { } function fillInWord2() { - cancel_highLight(); + cancelHighlighting(); } -function ChangeHighlight() { +function toggleHighlighting() { if (isHighlight) { isHighlight = false; - cancel_highLight(); + 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 }}
- 生词高亮 + 生词高亮 大声朗读 划词入库