fix: if the second args of string.replace is a string, it would as Re…

…gExp. (#5069)

.changeset/strong-seas-wash.md

@@ -0,0 +1,6 @@
+---
+'@modern-js/runtime': patch
+---
+
+fix: if the second args of string.replace is a string, it would as RegExp. so we use function to replace
+fix: 如果 string.replace 第二个参数是字符串,他若有特殊字符将会被当作正则处理，所以我们用函数去替换他

packages/runtime/plugin-runtime/src/ssr/serverRender/renderToString/buildHtml.ts

@@ -1,25 +1,41 @@
 export type BuildHtmlCb = (tempalte: string) => string;
 
+/**
+ * It is unsafe unsafeReplace, only support serachValue exsit one time.
+ * @param source
+ * @param searchValue
+ * @param replaceValue
+ * @returns
+ */
+function unsafeReplace(
+  source: string,
+  searchValue: RegExp | string,
+  replaceValue: string,
+) {
+  const [s1, s2] = source.split(searchValue);
+  return s1 + replaceValue + s2;
+}
+
 export function buildHtml(template: string, callbacks: BuildHtmlCb[]) {
   return callbacks.reduce((tmp, cb) => cb(tmp), template);
 }
 
 export function createReplaceHtml(html: string): BuildHtmlCb {
-  const HTML_REG = /<!--<\?-\s*html\s*\?>-->/;
-  return (template: string) => template.replace(HTML_REG, html);
+  const HTML_REMARK = '<!--<?- html ?>-->';
+  return (template: string) => unsafeReplace(template, HTML_REMARK, html);
 }
 
 export function createReplaceSSRDataScript(data: string): BuildHtmlCb {
-  const SSR_DATA_REG = /<!--<\?-\s*SSRDataScript\s*\?>-->/;
-  return (template: string) => template.replace(SSR_DATA_REG, data);
+  const SSR_DATA_REMARK = '<!--<?- SSRDataScript ?>-->';
+  return (template: string) => unsafeReplace(template, SSR_DATA_REMARK, data);
 }
 
 export function createReplaceChunkJs(js: string): BuildHtmlCb {
-  const CHUNK_JS_REG = /<!--<\?-\s*chunksMap\.js\s*\?>-->/;
-  return (template: string) => template.replace(CHUNK_JS_REG, js);
+  const CHUNK_JS_REMARK = '<!--<?- chunksMap.js ?>-->';
+  return (template: string) => unsafeReplace(template, CHUNK_JS_REMARK, js);
 }
 
 export function createReplaceChunkCss(css: string): BuildHtmlCb {
-  const CHUNK_CSS_REG = /<!--<\?-\s*chunksMap\.css\s*\?>-->/;
-  return (template: string) => template.replace(CHUNK_CSS_REG, css);
+  const CHUNK_CSS_REG = '<!--<?- chunksMap.css ?>-->';
+  return (template: string) => unsafeReplace(template, CHUNK_CSS_REG, css);
 }

packages/runtime/plugin-runtime/src/ssr/serverRender/renderToString/entry.ts

@@ -151,8 +151,8 @@ export default class Entry {
     const html = buildHtml(this.template, [
       createReplaceChunkCss(this.result.chunksMap.css),
       createReplaceChunkJs(this.result.chunksMap.js),
-      createReplaceHtml(this.result.html || ''),
       createReplaceSSRDataScript(ssrDataScripts),
+      createReplaceHtml(this.result.html || ''),
       ...this.htmlModifiers,
     ]);
     const helmetData: HelmetData = ReactHelmet.renderStatic();