完成了Bug504“标记文章标题和文章下方问题不会高亮”的修复
parent
6d2191f727
commit
1fff921d79
|
@ -23,6 +23,8 @@ function getWord() {
|
||||||
function highLight() {
|
function highLight() {
|
||||||
if (!isHighlight) return;
|
if (!isHighlight) return;
|
||||||
let articleContent = document.getElementById("article").innerText; //将原来的.innerText改为.innerHtml,使用innerText会把原文章中所包含的<br>标签去除,导致处理后的文章内容失去了原来的格式
|
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 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 dictionaryWords = document.getElementById("selected-words2"); // words appearing in the user's new words list
|
||||||
let allWords = ""; //初始化allWords的值,避免进入判断后编译器认为allWords未初始化的问题
|
let allWords = ""; //初始化allWords的值,避免进入判断后编译器认为allWords未初始化的问题
|
||||||
|
@ -40,13 +42,19 @@ function highLight() {
|
||||||
if (list[i] !== "" && "<mark>".indexOf(list[i]) === -1 && "</mark>".indexOf(list[i]) === -1) {
|
if (list[i] !== "" && "<mark>".indexOf(list[i]) === -1 && "</mark>".indexOf(list[i]) === -1) {
|
||||||
//将文章中所有出现该单词word的地方改为:" <mark>" + word + "<mark> "。 正则表达式RegExp()中,"\\s"代表单词前后必须要有空格,以防止只对单词中的部分字符高亮的情况出现。
|
//将文章中所有出现该单词word的地方改为:" <mark>" + word + "<mark> "。 正则表达式RegExp()中,"\\s"代表单词前后必须要有空格,以防止只对单词中的部分字符高亮的情况出现。
|
||||||
articleContent = articleContent.replace(new RegExp("\\s"+list[i]+"\\s", "g"), " <mark>" + list[i] + "</mark> ");
|
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").innerHTML = articleContent;
|
||||||
|
document.getElementById("article_title").innerHTML = articleTitle;
|
||||||
|
document.getElementById("question").innerHTML = articleQuestion;
|
||||||
}
|
}
|
||||||
|
|
||||||
function cancelHighlighting() {
|
function cancelHighlighting() {
|
||||||
let articleContent = document.getElementById("article").innerText;//将原来的.innerText改为.innerHtml,原因同上
|
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");
|
let pickedWords = document.getElementById("selected-words");
|
||||||
const dictionaryWords = document.getElementById("selected-words2");
|
const dictionaryWords = document.getElementById("selected-words2");
|
||||||
const list = pickedWords.value.split(" ");
|
const list = pickedWords.value.split(" ");
|
||||||
|
@ -55,6 +63,8 @@ function cancelHighlighting() {
|
||||||
list[i] = list[i].replace(/(^\s*)|(\s*$)/g, "");
|
list[i] = list[i].replace(/(^\s*)|(\s*$)/g, "");
|
||||||
if (list[i] !== "") { //原来判断的代码中,替换的内容为“list[i]”这个字符串,这明显是错误的,我们需要替换的是list[i]里的内容
|
if (list[i] !== "") { //原来判断的代码中,替换的内容为“list[i]”这个字符串,这明显是错误的,我们需要替换的是list[i]里的内容
|
||||||
articleContent = articleContent.replace(new RegExp("<mark>"+list[i]+"</mark>", "g"), 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, "");
|
list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, "");
|
||||||
if (list2[i] !== "") { //原来代码中,替换的内容为“list[i]”这个字符串,这明显是错误的,我们需要替换的是list[i]里的内容
|
if (list2[i] !== "") { //原来代码中,替换的内容为“list[i]”这个字符串,这明显是错误的,我们需要替换的是list[i]里的内容
|
||||||
articleContent = articleContent.replace(new RegExp("<mark>"+list2[i]+"</mark>", "g"), list2[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").innerHTML = articleContent;
|
||||||
|
document.getElementById("article_title").innerHTML = articleTitle;
|
||||||
|
document.getElementById("question").innerHTML = articleQuestion;
|
||||||
}
|
}
|
||||||
|
|
||||||
function fillInWord() {
|
function fillInWord() {
|
||||||
|
|
|
@ -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>
|
<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/>
|
<p class="text-muted">Article added on: {{ today_article["date"] }}</p><br/>
|
||||||
<div class="p-3 mb-2 bg-light text-dark"><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 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><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">
|
<script type="text/javascript">
|
||||||
function toggle_visibility(id) { {# https://css-tricks.com/snippets/javascript/showhide-element/#}
|
function toggle_visibility(id) { {# https://css-tricks.com/snippets/javascript/showhide-element/#}
|
||||||
const e = document.getElementById(id);
|
const e = document.getElementById(id);
|
||||||
|
|
Loading…
Reference in New Issue