Browse Source

fix: 修复正文乱码

zhangyuhan 1 năm trước cách đây
mục cha
commit
e15ec1f255

+ 15 - 9
data/data-models/modules/article/model/content.js

@@ -2,7 +2,7 @@ import BaseModel from '../../../core/base'
 import useSummaryModel from '../transform/summary2'
 import useCommonTitleModel from '../transform/content'
 import useThirdPartyVerifyModel from '../transform/third-party-verify'
-import { replaceKeyword } from '@jy/util'
+import { replaceKeyowrdWithRichText } from '@jy/util'
 const thirdPartyVerify = useThirdPartyVerifyModel()
 
 class ContentModel extends BaseModel {
@@ -42,7 +42,7 @@ class ContentModel extends BaseModel {
       try {
         result.content.contentHighlighted = this.highlightContentHTML(result.content.content, data, result)
       } catch (error) {
-        console.error(error)        
+        console.error(error)
       }
     }
 
@@ -61,10 +61,10 @@ class ContentModel extends BaseModel {
     const projectCode = baseInfo?.projectCode
     // 下划线高亮项目名称编号
     if (projectName && title.toLowerCase().indexOf(projectName.toLowerCase()) > -1) {
-      title = replaceKeyword(title, projectName, '<span class="keyword keyword-underline project project-name hide-underline">$1</span>')
+      title = replaceKeyowrdWithRichText(title, projectName, '<span class="keyword keyword-underline project project-name hide-underline">$1</span>')
     }
     if (projectCode && title.toLowerCase().indexOf(projectCode.toLowerCase()) > -1) {
-      title = replaceKeyword(title, projectCode, '<span class="keyword keyword-underline project project-code">$1</span>')
+      title = replaceKeyowrdWithRichText(title, projectCode, '<span class="keyword keyword-underline project project-code">$1</span>')
     }
 
     // ------------------
@@ -74,7 +74,7 @@ class ContentModel extends BaseModel {
       highlightKeys = formatted.content.highlightKeys
     }
     highlightKeys.forEach((key) => {
-      title = replaceKeyword(title, key, '<span class="keyword highlight-text">$1</span>')
+      title = replaceKeyowrdWithRichText(title, key, '<span class="keyword highlight-text">$1</span>')
     })
     return title
   }
@@ -89,12 +89,18 @@ class ContentModel extends BaseModel {
 
     content = content.replace(/[^\{\u4e00-\u9fa5]{1,90}{[^\}\u4e00-\u9fa5]+?}/g, '').trim()
 
+    let tempNode = document.createElement('div')
+    tempNode.innerHTML = content
+
+
+
+
     // 下划线高亮项目名称编号
     if(projectName && content.toLowerCase().indexOf(projectName.toLowerCase()) > -1){
-      content = replaceKeyword(content, projectName, '<span class="keyword keyword-underline my-follow project project-name hide-underline">$1</span>')
+      content = replaceKeyowrdWithRichText(content, projectName, '<span class="keyword keyword-underline my-follow project project-name hide-underline">$1</span>')
     }
     if(projectCode && content.toLowerCase().indexOf(projectCode.toLowerCase()) > -1){
-      content = replaceKeyword(content, projectCode, '<span class="keyword keyword-underline my-follow project project-code">$1</span>')
+      content = replaceKeyowrdWithRichText(content, projectCode, '<span class="keyword keyword-underline my-follow project project-code">$1</span>')
     }
     // 下划线高亮中标企业
     const winners = summary.winners
@@ -103,7 +109,7 @@ class ContentModel extends BaseModel {
         const winnerName = winners[i].name
         const winnerId = winners[i].id
         if (winnerName && content.toLowerCase().indexOf(winnerName.toLowerCase()) > -1) {
-          content = replaceKeyword(content, winnerName, `<span data-eid='${winnerId}' class='keyword keyword-underline winner-name my-follow-ent'>$1</span>`)
+          content = replaceKeyowrdWithRichText(content, winnerName, `<span data-eid='${winnerId}' class='keyword keyword-underline winner-name my-follow-ent'>$1</span>`)
         }
       }
     }
@@ -125,7 +131,7 @@ class ContentModel extends BaseModel {
       highlightKeys = formatted.content.highlightKeys
     }
     highlightKeys.forEach((key) => {
-      content = replaceKeyword(content, key, '<span class="keyword highlight-text">$1</span>')
+      content = replaceKeyowrdWithRichText(content, key, '<span class="keyword highlight-text">$1</span>')
     })
 
     // 将多个连续的br替换成一个

+ 1 - 1
data/data-models/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jy/data-models",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "聚合API接口,对外提供业务数据模型",
   "main": "index.js",
   "files": [

+ 57 - 3
packages/util/modules/format/str.js

@@ -77,14 +77,14 @@ export function replaceKeyword(
   }
 
 
-  
+
   // 数组去空
   let lastArr = oldCharArr
     .filter((item) => !!item)
     .sort((a, b) => b.length - a.length)
   // 数组去重
   lastArr = Array.from(new Set(lastArr))
-  
+
   if (lastArr.length === 0 && notStrReplacer.length === 0) {
     return value
   }
@@ -105,6 +105,60 @@ export function replaceKeyword(
   }
 }
 
+/**
+ * 富文本高亮专用替换,用于指定关键词包裹高亮,使用dom解析避免HTML标签被影响
+ * @param htmlString - String
+ * @param keyword - String
+ * @param richChar - String $1
+ */
+export function replaceKeyowrdWithRichText (
+  htmlString,
+  keyword,
+  richChar = '<span class="highlight-text">$1</span>'
+) {
+  if (!keyword || !richChar || keyword === '略') return htmlString
+
+  // 创建一个临时的DOM元素来解析HTML字符串
+  const tempDiv = document.createElement('div')
+  tempDiv.innerHTML = htmlString
+
+  // 格式化需要替换的富文本
+  const richString = richChar.replace(/\$1/g, keyword)
+
+  // 递归函数来遍历DOM节点并替换文本
+  function replaceText(node) {
+    if (node.nodeType === Node.TEXT_NODE && node.textContent.includes(keyword)) {
+      // 创建一个文档片段来存放替换后的富文本和剩余文本
+      const frag = document.createDocumentFragment()
+      // 将文本分割为关键词前后的文本,以及替换的富文本
+      const parts = node.textContent.split(keyword)
+      for (let i = 0; i < parts.length; i++) {
+        if (i === 1) {
+          // 关键词替换为富文本
+          const richTextNode = document.createElement('div')
+          richTextNode.innerHTML = richString;
+          frag.appendChild(richTextNode.firstChild);
+        } else {
+          // 其他文本正常添加
+          frag.appendChild(document.createTextNode(parts[i]))
+        }
+      }
+      // 替换原始文本节点
+      node.parentNode.replaceChild(frag, node)
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      // 如果是元素节点,递归其子节点
+      Array.from(node.childNodes).forEach(replaceText)
+    }
+  }
+
+  // 从临时div开始递归替换文本
+  replaceText(tempDiv)
+
+  // 返回修改后的HTML字符串
+  return tempDiv.innerHTML
+
+}
+
 /**
  * 从key=value&key1=value1&key2=value2...中获取key值
  * @param {String} formString 目标字符串,必须为key=value&key1=value1的格式
@@ -125,7 +179,7 @@ export function getFormValue(formString, targetKey) {
 
 /**
  * 从url中获取对应name的参数
- * @param {String} name 
+ * @param {String} name
  * @returns {String}
  */
 export function getQueryParam(name) {

+ 1 - 1
packages/util/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jy/util",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "剑鱼项目通用工具集",
   "main": "index.js",
   "scripts": {