使用JavaScript正则替换任意标签属性中的换行符( )为空字符

要实现去除任意HTML标签属性内的换行符需求，可以结合正则表达式与回调函数精准处理，以下是具体方案：

实现代码 #

// 示例HTML内容
const originalHtml = '<span style="font-size:10.5pt;\nfont-family:\nKaiTi"><h1 title="Heading\nwith\nbreaks">Hello</h1>';

// 处理标签属性内的换行符
const cleanedHtml = originalHtml.replace(/<([a-z][a-z0-9]*)\b([^>]+)>/gi, (match, tagName, attrs) => {
    // 移除属性部分的所有换行符（包括\n、\r、\r\n）
    const cleanedAttrs = attrs.replace(/[\r\n]+/g, '');
    return `<${tagName}${cleanedAttrs}>`;
});

console.log(cleanedHtml);

方案说明 #

1. 匹配标签的正则：/<([a-z][a-z0-9]*)\b([^>]+)>/gi
   • i 标志忽略大小写，支持匹配<SPAN>、<Div>等任意大小写的标签
   • ([a-z][a-z0-9]*) 捕获合法的HTML标签名（以字母开头，后续可跟字母数字）
   • ([^>]+) 捕获标签内的所有属性内容（从标签名后到>`之前的部分）
2. 替换逻辑：通过回调函数单独处理捕获到的属性部分，用/[\r\n]+/g匹配所有类型的换行符并替换为空字符串，最后重新拼接成完整标签
3. 优势：仅处理标签属性内的换行，不会影响标签外的文本内容，同时支持任意合法HTML标签，适配各种属性格式（带引号或不带引号的属性均有效）

效果示例 #

原标签：

<span style="font-size:10.5pt;
font-family:
KaiTi">

处理后变为：

<span style="font-size:10.5pt;font-family:KaiTi">

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