tijiao

src/components/page/components/table/word.vue

@@ -1059,61 +1059,65 @@ export default {
 
             return emptyContentIndexes;
         },
+         escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+},
         highlightText(text, annotations) {
-            if (!this.isPreview) {
+    if (!this.isPreview) {
-                let tempText = text;
+        let tempText = text;
 
-                // 1. 使用占位符替代批注内容
+        // 1. 使用占位符替代批注内容
-                const placeholders = [];
+        const placeholders = [];
-                annotations.forEach((annotation, index) => {
+        annotations.forEach((annotation, index) => {
-                    if (annotation.content == '') {
+            if (annotation.content == '') {
-                        return tempText;
-                    }
-                    const placeholder = `{{remark_placeholder_${index}}}`; // 占位符
-                    const regExp = new RegExp(`(${annotation.content})`, 'gi'); // 全局匹配批注内容
-
-                    // 如果批注内容存在，替换成占位符
-                    if (tempText.includes(annotation.content)) {
-                        tempText = tempText.replace(regExp, placeholder);
-                        placeholders.push({ placeholder, annotation, index });
-                    }
-                });
-
-                // 2. 为占位符添加高亮
-                placeholders.forEach(({ placeholder, annotation, index }) => {
-                    const regExp = new RegExp(placeholder, 'gi');
-
-                    tempText = tempText.replace(regExp, (match) => {
-    const randomColor = this.getRandomLightColor();
-    return `
-        <span 
-            class="remarkbg"
-            style="background-color: ${randomColor}; 
-                   position: relative; 
-                   display: inline-block; 
-                   white-space: nowrap; 
-                   overflow-wrap: anywhere; 
-                   border-left: 2px solid #cd5454; 
-                   border-right: 2px solid #cd5454;"
-            comment-Id="${annotation.amc_id}"
-        >
-            ${annotation.content}
-            <span class="positionRemarkIndex"
-                style="position: absolute; top: -14px; right: -10px; font-size: 0.8em; color: red;">
-                ${index + 1}
-            </span>
-        </span>
-    `;
-});
-
-                });
-
-                // 3. 返回处理后的文本
                 return tempText;
-            } else {
-                return text;
             }
-        },
+            const escapedContent = this.escapeRegExp(annotation.content); // 转义正则表达式中的特殊字符
+            const placeholder = `{{remark_placeholder_${index}}}`; // 占位符
+            const regExp = new RegExp(`(${escapedContent})`, 'gi'); // 全局匹配批注内容
+
+            // 如果批注内容存在，替换成占位符
+            if (tempText.includes(annotation.content)) {
+                tempText = tempText.replace(regExp, placeholder);
+                placeholders.push({ placeholder, annotation, index });
+            }
+        });
+
+        // 2. 为占位符添加高亮
+        placeholders.forEach(({ placeholder, annotation, index }) => {
+            const regExp = new RegExp(placeholder, 'gi');
+
+            tempText = tempText.replace(regExp, (match) => {
+                const randomColor = this.getRandomLightColor();
+                return `
+                    <span 
+                        class="remarkbg"
+                        style="background-color: ${randomColor}; 
+                               position: relative; 
+                               display: inline-block; 
+                               white-space: nowrap; 
+                               overflow-wrap: anywhere; 
+                               border-left: 2px solid #cd5454; 
+                               border-right: 2px solid #cd5454;"
+                        comment-Id="${annotation.amc_id}"
+                    >
+                        ${annotation.content}
+                        <span class="positionRemarkIndex"
+                            style="position: absolute; top: -14px; right: -10px; font-size: 0.8em; color: red;">
+                            ${index + 1}
+                        </span>
+                    </span>
+                `;
+            });
+        });
+
+        // 3. 返回处理后的文本
+        return tempText;
+    } else {
+        return text;
+    }
+},
+
 
         getCommentsData() {
             if (!this.isPreview) {