diff --git a/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx b/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
index 185e107ca6..391881841b 100644
--- a/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
+++ b/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
@@ -56,10 +56,11 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
   }, [value])
 
   const coloredContent = (tempValue || '')
-    .replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
-    .replace(/\n/g, '<br />')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
+    .replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
+    .replace(/\n/g, '<br />')
+    
 
 
   const handleEdit = () => {
diff --git a/web/app/components/base/block-input/index.tsx b/web/app/components/base/block-input/index.tsx
index 440fd63d13..796d1c06a5 100644
--- a/web/app/components/base/block-input/index.tsx
+++ b/web/app/components/base/block-input/index.tsx
@@ -68,10 +68,11 @@ const BlockInput: FC<IBlockInputProps> = ({
   })
 
   const coloredContent = (currentValue || '')
-    .replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
-    .replace(/\n/g, '<br />')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
+    .replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
+    .replace(/\n/g, '<br />')
+    
 
   // Not use useCallback. That will cause out callback get old data.
   const handleSubmit = () => {