From 1fff921d7947310c628ab9167cba4ffa4cb228d0 Mon Sep 17 00:00:00 2001
From: your name <your email>
Date: Tue, 25 Apr 2023 22:32:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=86Bug504=E2=80=9C?=
 =?UTF-8?q?=E6=A0=87=E8=AE=B0=E6=96=87=E7=AB=A0=E6=A0=87=E9=A2=98=E5=92=8C?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E4=B8=8B=E6=96=B9=E9=97=AE=E9=A2=98=E4=B8=8D?=
 =?UTF-8?q?=E4=BC=9A=E9=AB=98=E4=BA=AE=E2=80=9D=E7=9A=84=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/static/js/highlight.js      | 14 ++++++++++++++
 app/templates/userpage_get.html |  4 ++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/static/js/highlight.js b/app/static/js/highlight.js
index 5ec9663..17cd2ad 100644
--- a/app/static/js/highlight.js
+++ b/app/static/js/highlight.js
@@ -23,6 +23,8 @@ function getWord() {
 function highLight() {
     if (!isHighlight) return;
     let articleContent = document.getElementById("article").innerText; //将原来的.innerText改为.innerHtml，使用innerText会把原文章中所包含的<br>标签去除，导致处理后的文章内容失去了原来的格式
+    let articleTitle = document.getElementById("article_title").innerText;//获取文章标题对象的引用
+    let articleQuestion = document.getElementById("question").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 = "";  //初始化allWords的值，避免进入判断后编译器认为allWords未初始化的问题
@@ -40,13 +42,19 @@ function highLight() {
         if (list[i] !== "" && "<mark>".indexOf(list[i]) === -1 && "</mark>".indexOf(list[i]) === -1) {
 	    //将文章中所有出现该单词word的地方改为：" <mark>" + word + "<mark> "。 正则表达式RegExp()中，"\\s"代表单词前后必须要有空格，以防止只对单词中的部分字符高亮的情况出现。
             articleContent = articleContent.replace(new RegExp("\\s"+list[i]+"\\s", "g"), " <mark>" + list[i] + "</mark> ");
+            articleTitle = articleTitle.replace(new RegExp("\\s"+list[i]+"\\s", "g"), " <mark>" + list[i] + "</mark> ");
+            articleQuestion = articleQuestion.replace(new RegExp("\\s"+list[i]+"\\s", "g"), " <mark>" + list[i] + "</mark> ");
         }
     }
     document.getElementById("article").innerHTML = articleContent;
+    document.getElementById("article_title").innerHTML = articleTitle;
+    document.getElementById("question").innerHTML = articleQuestion;
 }
 
 function cancelHighlighting() {
     let articleContent = document.getElementById("article").innerText;//将原来的.innerText改为.innerHtml，原因同上
+    let articleTitle = document.getElementById("article_title").innerText;//获取文章标题对象的引用
+    let articleQuestion = document.getElementById("question").innerText;//获取文章问题对象的引用
     let pickedWords = document.getElementById("selected-words");
     const dictionaryWords = document.getElementById("selected-words2");    
     const list = pickedWords.value.split(" ");    
@@ -55,6 +63,8 @@ function cancelHighlighting() {
             list[i] = list[i].replace(/(^\s*)|(\s*$)/g, "");
             if (list[i] !== "") { //原来判断的代码中，替换的内容为“list[i]”这个字符串，这明显是错误的，我们需要替换的是list[i]里的内容
                 articleContent = articleContent.replace(new RegExp("<mark>"+list[i]+"</mark>", "g"), list[i]);
+                articleTitle = articleTitle.replace(new RegExp("<mark>"+list[i]+"</mark>", "g"), list[i]);
+                articleQuestion = articleQuestion.replace(new RegExp("<mark>"+list[i]+"</mark>", "g"), list[i]);
             }
         }
     }
@@ -65,10 +75,14 @@ function cancelHighlighting() {
             list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, "");
             if (list2[i] !== "") { //原来代码中，替换的内容为“list[i]”这个字符串，这明显是错误的，我们需要替换的是list[i]里的内容
                 articleContent = articleContent.replace(new RegExp("<mark>"+list2[i]+"</mark>", "g"), list2[i]);
+                articleTitle = articleTitle.replace(new RegExp("<mark>"+list2[i]+"</mark>", "g"), list2[i]);
+                articleQuestion = articleQuestion.replace(new RegExp("<mark>"+list2[i]+"</mark>", "g"), list2[i]);
             }
         }
     }
     document.getElementById("article").innerHTML = articleContent;
+    document.getElementById("article_title").innerHTML = articleTitle;
+    document.getElementById("question").innerHTML = articleQuestion;
 }
 
 function fillInWord() {
diff --git a/app/templates/userpage_get.html b/app/templates/userpage_get.html
index b5e16aa..59e6ee1 100644
--- a/app/templates/userpage_get.html
+++ b/app/templates/userpage_get.html
@@ -58,10 +58,10 @@
             <div class="alert alert-success" role="alert">According to your word list, your level is <span class="badge bg-success">{{ today_article["user_level"] }}</span>  and we have chosen an article with a difficulty level of <span class="badge bg-success">{{ today_article["text_level"] }}</span> for you.</div>
                 <p class="text-muted">Article added on: {{ today_article["date"] }}</p><br/>
             <div class="p-3 mb-2 bg-light text-dark"><br/>
-            <p class="display-5">{{ today_article["article_title"] }}</p><br/>
+            <p class="display-5"><font id="article_title">{{ today_article["article_title"] }}</font></p><br/>
             <p class="lead"><font id="article" size=2>{{ today_article["article_body"] }}</font></p><br/>
             <p><small class="text-muted">{{ today_article['source'] }}</small></p><br/>
-            <p><b>{{ today_article['question'] }}</b></p><br/>
+            <p><b><font id="question">{{ today_article['question'] }}</font></b></p><br/>
                 <script type="text/javascript">
                     function toggle_visibility(id) { {# https://css-tricks.com/snippets/javascript/showhide-element/#}
                         const e = document.getElementById(id);