Fix/fix word highlight issue (#34)

* 🚧 Fix floating panel out of boundary. * 🐛 Fix can not mark word bug. * 🐛 Fix word highlight issue. ---------
tolerious · Aug 30, 2024 · 968545d · 968545d
1 parent c4ccab4
commit 968545d
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 83 deletions.
diff --git a/src/plugins/general/index.js b/src/plugins/general/index.js
@@ -1,7 +1,4 @@
-import {
-  logger,
-  waitEventFromBackgroundScriptInContentScript,
-} from "../utils/utils";
+import { listenEventFromBackgroundScript, logger } from "../utils/utils";
 import {
   customizeGeneralEvent,
   getWordList,
@@ -11,7 +8,7 @@ import {
 
 export async function initializeGeneralWebSite() {
   logger("initializeGeneralWebSite");
-  waitEventFromBackgroundScriptInContentScript();
+  listenEventFromBackgroundScript();
   await injectTranslationFloatingPanelToShadowDom();
   customizeGeneralEvent();
   goThroughDomAndGenerateCustomElement(await getWordList());

diff --git a/src/plugins/general/utils.js b/src/plugins/general/utils.js
@@ -66,24 +66,8 @@ function removeUnMarkedWord(word) {
   markedNodeList.forEach((node) => {
     // 说明取消的是这个节点
     if (
-      node.textContent
-        .trim()
-        .toLocaleLowerCase()
-        .replace(".", "")
-        .replace(",", "")
-        .replace('"', "")
-        .replace("(", "")
-        .replace(")", "")
-        .replace(":", "") ===
-      word
-        .trim()
-        .toLocaleLowerCase()
-        .replace(".", "")
-        .replace(",", "")
-        .replace('"', "")
-        .replace("(", "")
-        .replace(")", "")
-        .replace(":", "")
+      convertStringToLowerCaseAndRemoveSpecialCharacter(node.textContent) ===
+      convertStringToLowerCaseAndRemoveSpecialCharacter(word)
     ) {
       const targetParentNode = node.parentNode;
       // 重新把被自定义span标签包裹的文本系欸但替换回来
@@ -97,26 +81,12 @@ function convertCurrentTextNodeContent(textNode, targetWordList) {
   // 判断并找出当前文本节点中包含的目标单词
   const textContent = textNode.textContent;
   const targetWordSet = new Set(targetWordList);
-  const splitedTextContentStringList = textContent.split(" ");
+  const splittedTextContentStringList = textContent.split(" ");
+  // 存放的是目标单词在splittedTextContentStringList中的索引
   const indexList = [];
-  splitedTextContentStringList.filter((s, index) => {
-    /**
-     *  FIXME: 这里没有处理的一点是如果是被特殊服务包裹起来的字符，
-     * 例如"hello, world",这里world"会被当成一个单词，所以使用set中的has
-     * 函数就无法判断出来，这里需要单独处理下这种情况
-     *
-     * */
+  splittedTextContentStringList.filter((s, index) => {
     if (
-      targetWordSet.has(
-        s
-          .toLowerCase()
-          .replace(".", "")
-          .replace(",", "")
-          .replace('"', "")
-          .replace("(", "")
-          .replace(")", "")
-          .replace(":", "")
-      )
+      targetWordSet.has(convertStringToLowerCaseAndRemoveSpecialCharacter(s))
     ) {
       indexList.push(index);
     }
@@ -126,7 +96,7 @@ function convertCurrentTextNodeContent(textNode, targetWordList) {
   const newNodeList = [];
   // 遍历indexList，重新构造#text节点
   if (indexList.length > 0) {
-    splitedTextContentStringList.forEach((s, index) => {
+    splittedTextContentStringList.forEach((s, index) => {
       // 这段文本不包含目标单词
       const stt = s + " ";
       if (indexList.indexOf(index) > -1) {
@@ -158,7 +128,7 @@ function convertCurrentTextNodeContent(textNode, targetWordList) {
 export function customizeGeneralEvent() {
   addSelectionChangeEvent();
   addMouseDownEvent();
-  listenFromFloatingPanelEvent();
+  listenEventFromFloatingPanelEvent();
 }
 
 /**
@@ -376,7 +346,7 @@ function hideTranslationFloatingPanel() {
   }
 }
 
-async function createTranslationFloatingPanel(x = 0, y = 0) {
+async function createTranslationFloatingPanelToShadowDom(x = 0, y = 0) {
   const shadowRoot = document.createElement("div");
   shadowRoot.id = translationFloatingPanelShadowRootId;
   shadowRoot.style.display = "none";
@@ -438,7 +408,7 @@ function injectTranslationFloatingPanelCss() {
   });
 }
 
-export function listenFromFloatingPanelEvent() {
+export function listenEventFromFloatingPanelEvent() {
   document.addEventListener("floatingPanelEvent", async (event) => {
     const detail = JSON.parse(event.detail);
     switch (detail.type) {
@@ -505,5 +475,17 @@ export async function injectTranslationFloatingPanelToShadowDom() {
   if (checkIfTranslationFloatingPanelExist()) {
     return;
   }
-  await createTranslationFloatingPanel();
+  await createTranslationFloatingPanelToShadowDom();
+}
+
+function convertStringToLowerCaseAndRemoveSpecialCharacter(s) {
+  return s
+    .trim()
+    .toLowerCase()
+    .replaceAll(".", "")
+    .replaceAll(",", "")
+    .replaceAll('"', "")
+    .replaceAll("(", "")
+    .replaceAll(")", "")
+    .replaceAll(":", "");
 }
diff --git a/src/plugins/utils/utils.js b/src/plugins/utils/utils.js
@@ -215,7 +215,7 @@ export function sendMessageFromContentScriptToBackgroundScript(
   browser.runtime.sendMessage({ type, message });
 }
 
-export function waitEventFromBackgroundScriptInContentScript() {
+export function listenEventFromBackgroundScript() {
   browser.runtime.onMessage.addListener((message) => {
     switch (message.type) {
       case "youtube":

diff --git a/src/webPage/translationFloatingPanel/src/App.vue b/src/webPage/translationFloatingPanel/src/App.vue
@@ -77,15 +77,7 @@ function getYoutubeId() {
 async function addWord() {
   if (isLiked.value) {
     const t = await customPost(GET_WORD_ID, {
-      en: currentWord.value
-        .trim()
-        .toLocaleLowerCase()
-        .replace(',', '')
-        .replace('.', '')
-        .replace('"', '')
-        .replace('(', '')
-        .replace(')', '')
-        .replace(':', '')
+      en: convertStringToLowerCaseAndRemoveSpecialCharacter(currentWord.value.trim())
     });
     const r = await customPost(DELETE_WORD, { id: t.data.data._id, groupId: t.data.data.groupID });
     if (r.data.code === 200) {
@@ -95,15 +87,7 @@ async function addWord() {
   } else {
     let t;
     t = await customPost(SAVE_WORD, {
-      en: currentWord.value
-        .trim()
-        .toLocaleLowerCase()
-        .replace(',', '')
-        .replace('.', '')
-        .replace('"', '')
-        .replace('(', '')
-        .replace(')', '')
-        .replace(':', ''),
+      en: convertStringToLowerCaseAndRemoveSpecialCharacter(currentWord.value.trim()),
       groupId: groupId.value
     });
     if (t.data.code === 200) {
@@ -144,15 +128,7 @@ watch(currentWord, async (newVal) => {
     return;
   }
   const t = await customPost(SEARCH_WORD, {
-    en: newVal
-      .trim()
-      .toLowerCase()
-      .replace(',', '')
-      .replace('.', '')
-      .replace('"', '')
-      .replace('(', '')
-      .replace(')', '')
-      .replace(':', '')
+    en: convertStringToLowerCaseAndRemoveSpecialCharacter(newVal.trim())
   });
   isLiked.value = t.data.data.isLiked;
 });
@@ -176,15 +152,7 @@ function listenEventFromGeneralScript() {
         } else {
           isPlayAudioIconVisible.value = true;
         }
-        getTranslationFromYouDao(
-          data.word
-            .replace('.', '')
-            .replace(',', '')
-            .replace('"', '')
-            .replace('(', '')
-            .replace(')', '')
-            .replace(':', '')
-        );
+        getTranslationFromYouDao(convertStringToLowerCaseAndRemoveSpecialCharacter(data.word));
         break;
       case 'play':
         if (isPlayAudioIconVisible.value) {
@@ -271,6 +239,18 @@ function sendMessageToGeneralScript(message: any) {
   });
   document.dispatchEvent(event);
 }
+
+function convertStringToLowerCaseAndRemoveSpecialCharacter(s: string) {
+  return s
+    .trim()
+    .toLowerCase()
+    .replace(/\./g, '')
+    .replace(/,/g, '')
+    .replace(/"/g, '')
+    .replace(/\(/g, '')
+    .replace(/\)/g, '')
+    .replace(/:/g, '');
+}
 </script>
 
 <style scoped>