[edit] keyword

src/logic/content/keywordReminder.js

@@ -28,7 +28,9 @@ const keywordData = [
   },
 ]
 
-let tagData = []
+let tagData = [];
+let lastRange;
+
 
 const getInputBox = () => {
   return document.querySelector('div[data-testid="tweetTextarea_0"]');
@@ -53,53 +55,33 @@ export const highlightKeyword = () => {
   let inputBox = getInputBox();
   if(inputBox) {
     let textEleArr = inputBox.querySelectorAll('span[data-text="true"]');
-    let lastRange;
 
     if(textEleArr && textEleArr.length) {
       for(let i = 0; i < keywordData.length; i++) {
         let keyword = keywordData[i]['keyword'];
         for(let j = 0; j < textEleArr.length; j++) {
+          //todo 遍历 tagData 删除无keyword 的 tag;
+
+
           let txt = textEleArr[j]['innerHTML'];
           let startPos = txt.indexOf(keyword), endPos;
           if(startPos > -1) {
             endPos = startPos + keyword.length;
-
-            if(checkHasTag({keyword, startPos, endPos, rowIndex: j})) {
-              continue;
+            if(!checkHasTag({keyword, startPos, endPos, rowIndex: j})) {
+              addRangeDom({j, keyword, startPos, endPos, eleItem: textEleArr[j]});
             }
-            removeTag({rowIndex: j, keyword})
-
-            lastRange = window.getSelection().getRangeAt(0)
 
-            let range = new Range();
-            range.setStart(textEleArr[j].firstChild, startPos);
-            range.setEnd(textEleArr[j].firstChild, endPos);
-            window.getSelection().removeAllRanges();
-            window.getSelection().addRange(range);
-
-            var range1 = window.getSelection().getRangeAt(0);
-            var rectDom = range1.getBoundingClientRect();
-            console.log(rectDom);
-
-            window.getSelection().removeAllRanges();
-
-            if(lastRange) {
-              window.getSelection().addRange(lastRange)
+            while(startPos > -1) {
+              console.log('while ', startPos )
+              startPos = txt.indexOf(keyword, startPos + 1);
+              endPos = startPos + keyword.length;
+              if(startPos > -1) {
+                if(!checkHasTag({keyword, startPos, endPos, rowIndex: j})) {
+                  addRangeDom({j, keyword, startPos, endPos, eleItem: textEleArr[j], keywordIndex: i});
+                }
+              }
             }
 
-            tagData.push({
-              keyword,
-              rowIndex: j,
-              startPos,
-              endPos
-            })
-
-            let inputBoxRect = inputBox.getBoundingClientRect();
-            let left = rectDom.left - inputBoxRect.left;
-            let top = rectDom.top - inputBoxRect.top + 2;
-
-            let cssText = `left: ${left}px;top: ${top}px;width: ${rectDom.width}px;height: ${rectDom.height}px;`;
-            addHighlightDom({cssText, rowIndex: j, keyword});
           } else {
             removeTag({rowIndex: j, keyword})
           }
@@ -112,6 +94,43 @@ export const highlightKeyword = () => {
   }
 }
 
+const addRangeDom = (params) => {
+  let {j, keyword, startPos, endPos, eleItem, keywordIndex} = params;
+  // removeTag({rowIndex: j, keyword})
+  lastRange = window.getSelection().getRangeAt(0)
+
+  let range = new Range();
+  range.setStart(eleItem.firstChild, startPos);
+  range.setEnd(eleItem.firstChild, endPos);
+  window.getSelection().removeAllRanges();
+  window.getSelection().addRange(range);
+
+  var range1 = window.getSelection().getRangeAt(0);
+  var rectDom = range1.getBoundingClientRect();
+  console.log(rectDom);
+
+  window.getSelection().removeAllRanges();
+
+  if(lastRange) {
+    window.getSelection().addRange(lastRange)
+  }
+
+  tagData.push({
+    keyword,
+    rowIndex: j,
+    startPos,
+    endPos
+  })
+
+  let inputBox = getInputBox();
+  let inputBoxRect = inputBox.getBoundingClientRect();
+  let left = rectDom.left - inputBoxRect.left;
+  let top = rectDom.top - inputBoxRect.top + 2;
+
+  let cssText = `left: ${left}px;top: ${top}px;width: ${rectDom.width}px;height: ${rectDom.height}px;`;
+  addHighlightDom({cssText, rowIndex: j, keyword, keywordIndex, startPos});
+}
+
 const checkHasTag = (params) => {
   let hasTag = false;
   for(let i = 0; i < tagData.length; i++) {
@@ -126,7 +145,7 @@ const checkHasTag = (params) => {
 }
 
 const removeTag = (params) => {
-  let tagDom = document.getElementsByClassName(`${params.rowIndex}-${params.keyword}`);
+  let tagDom = document.getElementsByClassName(`denet-keyword-tag-${params.rowIndex}`);
   tagData = tagData.filter(item => item.rowIndex == params.rowIndex && params.keyword == item.keyword)
   if(tagDom && tagDom.length) {
     for(let i = 0; i < tagDom.length; i++) {
@@ -149,8 +168,8 @@ export const addHighlightDom = (params) => {
   let ele = document.createElement('div');
   let defaultCssText = 'position: absolute;border: 1.5px dashed #FCAB40;box-sizing: border-box';
   ele.style.cssText = params.cssText + defaultCssText;
-  ele.id = params.id || '';
-  ele.setAttribute("class", `${params.rowIndex}-${params.keyword}`);
+  ele.id = `denet-keyword-tag-${params.rowIndex}-${params.keywordIndex}-${params.startPos}`;
+  ele.setAttribute("class", `denet-keyword-tag-${params.rowIndex}`);
   let highlightEleWrapper = document.getElementById('denet-keword-highlight-wrapper');
   if(highlightEleWrapper) {
     highlightEleWrapper.appendChild(ele);