正则非捕获组拆分问题：匹配HTML标签名并移除标签内内容

问题分析 #

你原来的正则把<div整个当作了拆分分隔符，再加上捕获了标签名div，split方法会自动把捕获组的内容也塞进结果数组，这就导致<丢失，还多出了不需要的div项。

解决方案 #

方案一：直接拆分并移除标签名

调整正则，只匹配<和>之间的标签名，同时确保它后面紧跟>，这样split时会直接移除标签名，保留你需要的前后内容：

var str = '<div> div';
// 匹配<和>之间的单词字符，且后面必须紧跟>（转义后的>）
var regex = /\w*(?=>)/g;
var arr = str.split(regex);
console.log(arr); // 输出: ["<", "> div"]

正则说明：

• \w*：匹配任意长度的单词字符（对应HTML标签名）
• (?=>)：正向预查，确保匹配的内容后面紧接>，避免误匹配字符串中其他位置的单词

方案二：先替换再拆分（步骤更清晰）

如果需要更直观的操作流程，可以先把<标签名>替换为<>，再拆分字符串：

var str = '<div> div';
// 保留<，移除中间的标签名
var processedStr = str.replace(/(<)\w*(?=>)/g, '$1');
// 此时processedStr为 "<> div"
// 用正向预查拆分，确保>本身不被拆分
var arr = processedStr.split(/(?=>)/);
console.log(arr); // 输出: ["<", "> div"]

解释：

• replace方法捕获了<，用$1把它放回结果，同时去掉中间的标签名
• split(/(?=>)/)会在>的起始位置拆分，不会破坏>本身的完整性

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