如何用grep/egrep正则匹配HTML标签内文本并包裹自定义标签？

首先明确：正则表达式天生不擅长处理嵌套结构，HTML/JSX的标签嵌套属于递归层级结构，grep默认使用的POSIX正则完全无法实现任意深度嵌套的匹配。但如果你的需求是处理有限层级嵌套，或能接受折中方案，还是可以做针对性优化。

现有命令的问题分析 #

你当前使用的命令：

grep -o '<[^>]*>[^<]*</[^>]*>' filename.js

仅能匹配单层无嵌套的标签，一旦遇到标签内嵌套其他标签（比如<div><p>内容</p></div>），[^<]*会在第一个<处停止匹配，完全无法抓取嵌套结构里的内容。

折中方案：处理有限层级嵌套 #

如果你的嵌套层级可预估（比如最多3层），可以借助grep的扩展正则（加-E参数）实现多层匹配。例如支持最多2层嵌套的命令：

grep -o -E '<[^>]*>([^<]*|<[^>]*>[^<]*</[^>]*)*</[^>]*>' filename.js

逻辑说明：

• <[^>]*>：匹配起始标签（含任意属性）
• ([^<]*|<[^>]*>[^<]*</[^>]*)*：匹配0个或多个「纯文本内容」或「单层标签内容」
• </[^>]*>：匹配对应闭合标签

若要支持更多层级，可继续往括号内叠加嵌套表达式，但层级越多正则越臃肿，且仍无法覆盖无限嵌套场景。

更靠谱的方案：用专用HTML/JSX解析工具 #

如果要完美处理任意深度的嵌套标签，放弃正则和grep，改用结构化解析工具才是正确方向：

• Node.js工具jsdom：可将JSX/HTML解析为DOM结构，遍历提取内容后替换为自定义组件，示例思路：

  const { JSDOM } = require('jsdom');
  const fs = require('fs');
  
  const content = fs.readFileSync('filename.js', 'utf8');
  const dom = new JSDOM(content);
  const root = dom.window.document.body;
  
  function wrapWithCustomComponent(el) {
    if (el.nodeType === 1) {
      const customComp = `<MyComponent>${el.innerHTML}</MyComponent>`;
      const tempDiv = dom.window.document.createElement('div');
      tempDiv.innerHTML = customComp;
      el.replaceWith(tempDiv.firstChild);
    }
    Array.from(el.children).forEach(wrapWithCustomComponent);
  }
  
  wrapWithCustomComponent(root);
  console.log(dom.serialize());
  

• 命令行工具pup：基于CSS选择器提取内容，结合sed/awk可实现替换，例如提取所有标签内文本：

  pup 'text{}' filename.js
  

总结 #

1. 纯grep+正则仅能处理有限层级嵌套，无法覆盖任意深度的嵌套场景；
2. 要完美处理HTML/JSX的嵌套结构，必须使用专用解析工具，正则并非合适方案；
3. 若偏好命令行工具，优先选择pup这类结构化解析工具，而非硬套正则。

内容的提问来源于stack exchange，提问作者awm