文本替换是 Word 文档处理中最常见的需求之一——批量替换合同中的占位符、统一修正术语、或者对特定格式的文本进行规范化处理，都可以通过查找替换功能高效完成。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接处理 Word 文档，通过虚拟文件系统（VFS）管理字体和文件资源，无需后端服务支持。

本文介绍两个核心功能点：

• 替换指定文本
• 使用正则表达式替换文本

有关安装和项目配置，请参考 React 项目中集成 Spire.Doc for JavaScript 的方法。以下示例默认已安装 Spire.Doc 并完成 WebAssembly 模块初始化。

替换指定文本

替换指定文本是最基本的文本操作——将文档中的某个词或短语统一替换为另一个字符串，支持大小写敏感和全词匹配选项。核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和目标 Word 文档载入 WASM 虚拟文件系统；然后实例化 Document 加载文件，调用 Replace 方法匹配指定字符串并替换为新文本，可通过 caseSensitive 和 wholeWord 参数控制匹配规则；最后保存文档，从 VFS 读取生成的文件，封装为 Blob 后触发浏览器下载。

import React, { useState } from 'react';

function App() {

  const ReplaceWithText = async () => {
      // 获取 Spire.Doc WASM 模块
      const docModule = window.wasmModule?.spiredoc;

       // 检查模块是否就绪
       if (!docModule) {
        alert('Spire.Doc is not ready yet');
        return;
       }
        // 将示例文件载入 VFS
        let inputFileName = 'Sample.docx';
        await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);

        // 创建文档实例
        const doc = new docModule.Document();

        // 从虚拟文件系统加载文档
        doc.LoadFromFile(inputFileName);

        // 替换文本："word" → "ReplacedText"，不区分大小写，全词匹配
        doc.Replace({ matchString: 'word', newValue: 'ReplacedText', caseSensitive: false, wholeWord: true });

        // 定义输出文件名并保存
        const outputFileName = 'ReplaceWithText_output.docx';
        doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });

        // 释放资源
        doc.Dispose();

        // 从 VFS 读取生成的文件，触发下载
        const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
        const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = outputFileName;
        a.click();
        URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>点击以下按钮替换 Word 文档中的文本。</h1>
      <button onClick={ReplaceWithText}>
        Generate
      </button>
    </div>
    );
  };

export default App;

通过 Replace 方法替换指定文本后，文档中的目标字符串将被统一替换为新内容

使用正则表达式替换文本

当需要匹配不固定格式的文本时，正则表达式是最强大的工具——例如将所有以 # 开头的标签文本统一替换为固定内容。核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和目标 Word 文档载入 WASM 虚拟文件系统；然后创建 Regex 对象定义匹配模式，调用 Replace 方法将匹配到的文本统一替换为指定内容；最后保存文档，从 VFS 读取生成的文件，封装为 Blob 后触发浏览器下载。

import React, { useState } from 'react';

function App() {

  const ReplaceWithText = async () => {
      // 获取 Spire.Doc WASM 模块
      const docModule = window.wasmModule?.spiredoc;

       // 检查模块是否就绪
       if (!docModule) {
        alert('Spire.Doc is not ready yet');
        return;
       }
       // 将示例文件载入 VFS
        let inputFileName = 'Sample.docx';
        await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}static/data/`);

        // 创建文档实例
        const doc = new docModule.Document();

        // 从虚拟文件系统加载文档
        doc.LoadFromFile(inputFileName);

        // 创建正则表达式，匹配以 # 开头的单词
        let regex = new docModule.Regex('\\bword\\b', docModule.RegexOptions.None);

        // 使用正则表达式替换文本
        doc.Replace(regex, 'Spire.Doc');

        // 定义输出文件名并保存
        const outputFileName = 'ReplaceTextByRegex_output.docx';
        doc.SaveToFile({fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });

        // 释放资源
        doc.Dispose();

        // 从 VFS 读取生成的文件，触发下载
        const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
        const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = outputFileName;
        a.click();
        URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>点击以下按钮替换 Word 文档中的文本。</h1>
      <button onClick={ReplaceWithText}>
        Generate
      </button>
    </div>
    );
  };

export default App;

通过正则表达式匹配并替换文本后，所有符合模式的字符串将被统一替换

常见问题

替换操作未生效（文本未被替换）

原因：caseSensitive 或 wholeWord 参数设置不正确导致匹配失败，实际文本与匹配条件不符。

解决：检查大小写是否匹配，或将 caseSensitive 设为 false 以忽略大小写，将 wholeWord 设为 false 以匹配部分单词：

doc.Replace({ matchString: 'word', newValue: 'ReplacedText', caseSensitive: false, wholeWord: false });

正则表达式匹配不到目标内容

原因：正则表达式模式中特殊字符（如 #、\）未正确转义，导致匹配失败。

解决：确保正则表达式中的特殊字符已正确转义。例如匹配 #tag 格式的文本时，# 和 \b 需要按字符串转义规则处理：

let regex = new wasmModule.Regex('#\\S+', wasmModule.RegexOptions.None);

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。