JavaScript正则表达式replace方法详解：从基础替换到回调函数应用
本文详细解析JavaScript中正则表达式replace方法的两种用法。首先介绍基础的字符串替换语法，随后深入讲解如何利用回调函数处理匹配结果，实现如敏感词过滤中动态生成对应长度星号的复杂替换逻辑，帮助开发者掌握更灵活的文本处理技巧。
replace方法基础回顾
在前面的文章中，我们已经介绍了正则表达式的四个基本方法，其中就包含了replace方法的使用场景。
回顾一下replace方法的基本用法：首先定义一个正则对象，例如var re=/匹配条件/；接着调用replace()函数，该函数会尝试用正则去匹配字符串，如果匹配成功，就将匹配到的部分替换为指定的新字符串。其标准语法格式为：字符串.replace(re, 新的字符串)。
举一个常见的例子：在网络内容审核中，经常需要将不文明词汇替换为星号(*)进行屏蔽。我们可以通过代码来演示这一过程。
<!DOCTYPE>
<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<script type="text/javascript">
window.onload=function(){
var oTxtarea=document.getElementsByTagName('textarea');
var oInpt=document.getElementById('bt');
var re=/你妹|fuck|你大爷|萌萌/g;
oTxtarea[0].value='我要看你妹，不行，你大爷，我要萌萌你妹，不行，你想想的太多了';
oInpt.onclick=function(){
oTxtarea[1].value=oTxtarea[0].value.replace(re,'*');
};
};
</script>
<body>
<textarea rows='7' cols='20'>
</textarea><br />
<input id='bt' type='button' value='转化不文明的语言'><br />
<textarea rows='7' cols='20'>
</textarea><br />
</body>
</html>
利用回调函数实现动态替换
然而，上述简单替换的效果可能并不理想，因为我们希望实现的是：被替换的字符有几个，就显示几个星号，以保持原文长度的直观性。
为了实现这一效果，我们需要对replace方法的参数进行分析。实际上，replace方法的第二个参数不仅可以是字符串，还可以是一个回调函数。我们将代码进行改造，把第二个参数改为回调函数，并给这个回调函数传递一个参数。
<!DOCTYPE>
<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<script type="text/javascript">
window.onload=function(){
var oTxtarea=document.getElementsByTagName('textarea');
var oInpt=document.getElementById('bt');
var re=/你妹|fuck|你大爷|萌萌/g;
oTxtarea[0].value='我要看你妹，不行，你大爷，我要萌萌你妹，不行，你想想的太多了';
oInpt.onclick=function(){
oTxtarea[1].value=oTxtarea[0].value.replace(re,function(obj){
alert(obj);
/*alert(obj.length);*/
});
};
};
</script>
<body>
<textarea rows='7' cols='20'>
</textarea><br />
<input id='bt' type='button' value='转化不文明的语言'><br />
<textarea rows='7' cols='20'>
</textarea><br />
</body>
</html>
观察运行结果可以发现，虽然第二个参数是回调函数，但直接输出回调函数的参数时，显示的是成功匹配到的完整字符串，这并非我们想要的最终显示效果。
因此，我们可以针对这个参数中的每个匹配结果进行单独处理。通过计算匹配字符串的长度，动态生成对应数量的星号，从而实现“几个字就产生几个星号”的效果。
<!DOCTYPE>
<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<script type="text/javascript">
window.onload=function(){
var oTxtarea=document.getElementsByTagName('textarea');
var oInpt=document.getElementById('bt');
var re=/你妹|fuck|你大爷|萌萌/g;
oTxtarea[0].value='我要看你妹，不行，你大爷，我要萌萌你妹，不行，你想想的太多了';
oInpt.onclick=function(){
oTxtarea[1].value=oTxtarea[0].value.replace(re,function(obj){
var a='';
for (var i = 0; i < obj.length; i++) {
a+='*';
}
return a;
});
};
};
</script>
<body>
<textarea rows='7' cols='20'>
</textarea><br />
<input id='bt' type='button' value='转化不文明的语言'><br />
<textarea rows='7' cols='20'>
</textarea><br />
</body>
</html>通过上述示例，相信大家对replace方法的理解又加深了一步，特别是对其回调函数参数的应用有了更清晰的认识。
以上就是本文的全部内容，希望对大家有所帮助。
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00