c vue.js处理字符串特殊字符解析成

admin 2026年02月13日 07:48 103 0

Vue.js处理字符串特殊字符时，默认会对插值表达式{{}}中的内容进行HTML转义，防止XSS攻击，若需解析特殊字符（如<转`

Vue.js 中字符串特殊字符的处理与解析实践

在 Web 开发中，字符串处理是常见需求，而特殊字符（如 <、>、&、、等）的解析与渲染往往是关键环节，这些字符在 HTML 和 JavaScript 中具有特殊含义，若处理不当可能导致页面布局错乱、功能异常，甚至引发安全漏洞（如 XSS 攻击），Vue.js 作为主流前端框架，提供了多种机制来处理字符串特殊字符，本文将结合实际场景,详细介绍其处理方法与最佳实践。

为什么需要处理字符串特殊字符？

特殊字符在 HTML 中的"特殊性"主要体现在两方面：

语义干扰

< 和 > 是 HTML 标签的界定符，如果字符串中包含 "<div>"，直接渲染会被浏览器解析为 HTML 标签而非纯文本,导致页面结构异常。

const maliciousString = "<script>alert('XSS')</script>";

如果直接插入 DOM,脚本将被执行。

安全风险

恶意用户可能注入恶意代码,如：

<img src="x" onerror="alert('XSS')">

若直接渲染，不仅可能导致页面劫持,还可能窃取用户数据或会话信息。

在 Vue.js 中正确处理字符串特殊字符，既是保证页面正常显示的需要,也是应用安全的重要防线。

Vue.js 中处理特殊字符的常见场景

场景1：纯文本展示（避免 HTML 解析）

当需要将字符串作为纯文本显示（如用户昵称、评论内容、日志信息等），不希望其中的 <、> 等字符被解析为 HTML 标签时，Vue.js 默认的 插值表达式（{{ }}） 会自动进行 HTML 转义。

示例：

<template>
  <div>
    <p>原始字符串: {{ rawString }}</p>
    <p>渲染结果: {{ rawString }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rawString: '<div>你好 & 世界</div>'
    }
  }
}
</script>

渲染结果： 浏览器中会显示：

原始字符串: <div>你好 & 世界</div>
渲染结果: &lt;div&gt;你好 &amp; 世界&lt;/div&gt;

可以看到，< 被转义为 <，> 被转义为 >，& 被转义为 &，字符串以纯文本形式展示，不会被解析为 HTML 标签。

场景2：富文本渲染（允许 HTML 解析）

如果字符串本身包含合法的 HTML 内容（如从后台返回的富文本文章、编辑器生成的 HTML 代码），需要渲染为对应的 DOM 结构，则需使用 v-html 指令。

重要提醒：v-html 不会自动转义内容，若内容不可信（如用户输入），可能引发 XSS 风险。

示例：

<template>
  <div>
    <p>原始 HTML 字符串: "{{ htmlString }}"</p>
    <div v-html="htmlString"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      htmlString: '<p style="color: red;">富文本内容</p>'
    }
  }
}
</script>

渲染结果： <div v-html="htmlString"> 会将字符串解析为 HTML 元素，显示为红色文字的"富文本内容",而非纯文本。

场景3：特殊字符与动态数据拼接

当字符串需要与动态数据拼接，且拼接结果可能包含特殊字符时，需确保拼接后的字符串符合预期，从 API 获取的数据可能包含 &,需正确处理避免解析错误。

示例：

<template>
  <div>
    <p>拼接结果: {{ '用户ID: ' + userId + '& 权限: ' + role }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userId: 123,
      role: 'admin&editor'
    }
  }
}
</script>

渲染结果： & 会被自动转义为 &，显示为"用户ID: 123& 权限: admin&editor"，避免被解析为 HTML 实体。

场景4：自定义特殊字符处理逻辑

若业务需要对特殊字符进行自定义处理（如仅转义 < 和 >，保留 &，或替换特定字符为自定义符号）,可通过以下方式实现：

Vue 2：自定义过滤器

// main.js
Vue.filter('escapeCustom', function (value) {
  if (!value) return '';
  return value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
});
// 组件中使用
<template>
  <p>{{ rawString | escapeCustom }}</p>
</template>

Vue 3：全局方法

// utils/string.js
export function escapeCustom(value) {
  return value?.replace(/</g, '&lt;').replace(/>/g, '&gt;') ?? '';
}
// 组件中使用
<template>
  <p>{{ escapeCustom(rawString) }}</p>
</template>
<script>
import { escapeCustom } from '@/utils/string';
export default {
  methods: {
    escapeCustom
  }
}
</script>

Vue 3 Composition API 中的处理方式

在 Vue 3 的 Composition API 中,我们可以创建更灵活的组合式函数来处理特殊字符：

// composables/useSafeHtml.js
import { ref, computed } from 'vue';
export function useSafeHtml(initialValue = '') {
  const rawHtml = ref(initialValue);
  const safeHtml = computed(() => {
    return rawHtml.value
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  });
  const setHtml = (value) => {
    rawHtml.value = value;
  };
  return {
    rawHtml,
    safeHtml,
    setHtml
  };
}

使用示例：

<template>
  <div>
    <p>安全渲染: {{ safeHtml }}</p>
    <button @click="setHtml('<script>alert(1)</script>')">
      测试恶意代码
    </button>
  </div>
</template>
<script setup>
import { useSafeHtml } from '@/composables/useSafeHtml';
const { safeHtml, setHtml } = useSafeHtml('');
</script>

安全最佳实践

永远不要信任用户输入

所有用户输入的内容都应视为不可信
使用插值表达式（{{ }}）作为默认选择
仅在确认内容安全时才使用 v-html

内容安全策略（CSP）安全策略，防止内联脚本执行：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

使用 DOMPurify 进行清理

对于需要渲染的富文本内容，使用 DOMPurify 进行清理：

npm install dompurify

import DOMPurify from 'dompurify';
function sanitizeHtml(dirtyHtml) {
  return DOMPurify.sanitize(dirtyHtml);
}
// 使用
const cleanHtml = sanitizeHtml(userInput);