JavaScript正则表达式截取与替换特定字符间字符串详解

作者:纸飞机时间:2026-10-21 21:19:01浏览:585

本文通过三个JavaScript示例,演示如何利用正则表达式截取并替换特定字符之间的字符串。内容涵盖@符号与#符号包裹内容的颜色高亮、连续数字格式化为日期时间,以及大括号内文本的替换处理,并附带相关正则工具链接。

本文通过具体的JavaScript代码示例,详细介绍如何使用正则表达式来截取和替换字符串中特定字符之间的内容。以下示例供读者参考学习。

示例1:特定标记内容的高亮替换

第一个示例演示了如何识别并高亮显示字符串中的特定标记。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" language="javascript" >
var html="ssssss @用户名 和话题 #话题标题# 用不同颜色高@假的亮 @用户名2 和sss#此话题不对呀#ss";
var html1="ssssss @用户名 和话题 #话题标题# 用不同颜色高@假的亮 @用户名2 和sss#此话题不对呀#ss";
var reg1=/( @[^ ]* )/g;
var reg2=/( #[^#]*# )/g;
var reg3=/(#[^#]*#)/g;
document.write(html);
document.write("<br/>");
html=html.replace(reg1,"<span style='color:red'>$1</span>");
html=html.replace(reg2,"<span style='color:green;'>$1</span>");
document.write(html);
document.write("<br/>");
html1 = html1.replace(reg3,"<span style='color:blue;'>$1</span>");
document.write(html1);
document.write("<br/>");
</script>
</head>
<body >
</body>
</html>

代码运行后的效果截图如下所示:

示例1:特定标记内容的高亮替换

示例2:数字字符串格式化为日期时间

第二个示例展示了如何将一串连续的数字字符串转换为标准的日期时间格式。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" language="javascript" >
var a = "20141021123212";
var reg4 = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/;
a = a.replace(reg4,"$1-$2-$3 $4:$5:$6");
document.write(a);
document.write("<br/>");
</script>
</head>
<body >
</body>
</html>

该示例的运行结果截图如下:

示例1:特定标记内容的高亮替换

示例3:大括号内文本的替换处理

第三个示例演示了如何替换大括号 {} 包裹的文本内容。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" language="javascript" >
var c ="好啊 {话题标题} 用不同颜色sss{此话题好}ss";
var reg5=/({[^{]*})/g;
c = c.replace(reg5,"<span style='color:red'>$1</span>");
document.write(c);
document.write("<br/>");
</script>
</head>
<body >
</body>
</html>

此示例的运行截图如下:

示例1:特定标记内容的高亮替换

此外,推荐以下两款常用的正则表达式辅助工具:

JavaScript正则表达式在线测试工具: http://tools.jb51.net/regex/javascript

正则表达式在线生成工具: http://tools.jb51.net/regex/create_reg

如需了解更多JavaScript相关知识,可参考本站专题:《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》。

希望上述内容能对各位的JavaScript编程工作提供帮助。

作者最新文章