使用JavaScript时如何去除正则匹配结果页面展示的逗号

当正则表达式携带全局匹配标记g时，String.match()的返回值是包含所有匹配项的数组。直接将数组赋值给innerHTML时，JavaScript会自动对数组做类型转换，隐式调用数组默认的toString()方法——这个方法会用英文逗号,作为分隔符拼接所有数组元素，最终页面渲染时就会出现多余的逗号。
对应你代码里的两个匹配结果：

• 对"How are you today?"的匹配结果result是[" ", " ", " ", "?"]，隐式转字符串后得到" , , ,?"，就是你看到的带逗号的效果
• 对"48%"的匹配结果result2是["%"]，数组只有单个元素时转字符串不会生成逗号，所以第二个节点的渲染结果看起来是正常的

在赋值给innerHTML前，手动调用数组的join()方法，传入空字符串作为分隔符，就能去掉默认的逗号，直接拼接所有匹配到的字符。
修正后的核心代码：

let regex = /\W/g;
let string = "How are you today?";
let string2 = "48%"
let result = string.match(regex);
let result2 = string2.match(regex);

// 手动指定空分隔符拼接数组，消除默认逗号
document.getElementById("header").innerHTML = result.join('');
document.getElementById("head").innerHTML = result2.join('');

如果需要在匹配到的字符之间加其他分隔（比如空格、换行），只需要给join()传入对应的分隔字符串即可，例如join(' ')就是用空格分隔匹配结果。

额外提个边界兼容：如果原字符串没有任何匹配的非单词字符，match()会返回null，直接调用join()会抛出JS错误，生产环境可以加个空值兜底：

document.getElementById("header").innerHTML = result ? result.join('') : '';
document.getElementById("head").innerHTML = result2 ? result2.join('') : '';

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