Javascript中replace方法与正则表达式的结合使用教程

 更新时间:2022年09月29日 12:06:57   作者:懒人Ethan  
replace方法是javascript涉及到正则表达式中较为复杂的一个方法,严格上说应该是string对象的方法,下面这篇文章主要给大家介绍了关于Javascript中replace方法与正则表达式的结合使用的相关资料,需要的朋友可以参考下

概要

在前端开发过程中,字符串的replace方法在数据处理中非常常用。本文通过一个关键字高亮显示的实例和一个文字插值的实例,来说明replace方法如何结合正则表达式,从而更加灵活的满足各种需求。

replace方法基本介绍

函数参数和返回值

  • regexp (pattern)
    一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。
  • substr (pattern)
    一个将被 newSubStr 替换的 字符串。其被视为一整个字符串,而不是一个正则表达式。仅第一个匹配项会被替换。
  • newSubStr (replacement)
    用于替换掉第一个参数在原字符串中的匹配部分的字符串。该字符串中可以内插一些特殊的变量名。参考下面的使用字符串作为参数。
  • function (replacement)
    一个用来创建新子字符串的函数,该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的指定一个函数作为参数。
  • 返回值
    一个部分或全部匹配由替代模式所取代的新的字符串。

字符串参数

  • $$ 插入一个 “$”。
  • $& 插入匹配的子串。
  • $` 插入当前匹配的子串左边的内容。
  • $’ 插入当前匹配的子串右边的内容。
  • $n 假如第一个参数是 RegExp对象,并且 n 是个小于100的非负整数,那么插入第 n 个括号匹配的字符串。提示:索引是从1开始。如果不存在第 n个分组,那么将会把匹配到到内容替换为字面量。比如不存在第3个分组,就会用“$3”替换匹配到的内容。
  • $ 这里Name 是一个分组名称。如果在正则表达式中并不存在分组(或者没有匹配),这个变量将被处理为空字符串。只有在支持命名分组捕获的浏览器中才能使用。

案例说明

字符串关键字高亮显示

将下面加粗的文字包上

The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match. If pattern is a string, only the first occurrence will be replaced.

"The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match. If pattern is a string, only the first occurrence will be replaced."
.replace(/(replace\(\)|pattern|replacement)/ig, "<span class='highlight'>$&<\/span>")

"The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match. If pattern is a string, only the first occurrence will be replaced."
.replace(/(replace\(\)|pattern|replacement)/ig, "<span class='highlight'>$1<\/span>")

var str = "(replace\\(\\)|pattern|replacement)";
var reg = new RegExp(str, "gi");
"The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match. If pattern is a string, only the first occurrence will be replaced."
.replace(reg, "<span class='highlight'>$1<\/span>")

本文给出了三种实现方法:

因为有些低版本浏览器并不支持replaceAll方法,所以都采用全局模式即“g”,即全文搜索,全文替换,这样可以到达和replaceAll一样的效果。

  • 方法1中,$&表示匹配的内容,所以可以直接放到内。
  • 方法2中,$1表示正则表达式中第一个匹配的字符串,()表示原子组,$1为第一个匹配的原子组。
  • 方法3中,考虑到要匹配的内容可能是变化的,所以增加了带变量的正则表达式实现。

上面三段代码的执行结果是一样的,具体如下:

Mustache插值

我们将下面文字中的Mustache内容,按照data中的key值进行替换。

var data = {
    p1: "replace()",
    p2: "replacement",
    p3: "pattern"
};

"The {{p1}} method returns a new string with some or all matches of a pattern replaced by a {{p2}}. The {{p3}} can be a string or a RegExp, and the {{p2}} can be a string or a function called for each match. If {{p3}} is a string, only the first occurrence will be replaced."
.replace(/\{\{\s*(.*?)\s*\}\}/gi, function(str, ...args){
    return data[args[0]];
});
  • 由于replace的字符串参数并不能作为对象的key值,所以采用函数参数。
  • 在实际的插值过程中,很有可能插值内容是不确定的,所以采用扩展运算符,接收所有的匹配值。
  • args[0]返回原子组匹配的内容,即p1,p2或p3。
  • 全局匹配,全局替换,所以所有的p1,p2和p3都会被替换。

执行结果如下:

总结

到此这篇关于Javascript中replace方法与正则表达式结合使用的文章就介绍到这了,更多相关js replace与正则结合使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 深入浅出ES6之let和const命令

    深入浅出ES6之let和const命令

    这篇文章主要介绍了ES6中let和const命令的相关资料,非常不错,具有参考借鉴价值,对es6 let const相关知识感兴趣的朋友一起看下吧
    2016-08-08
  • js实现移动端轮播图滑动切换

    js实现移动端轮播图滑动切换

    这篇文章主要为大家详细介绍了js实现移动端轮播图滑动切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • uni-app操作数据库的三种方法总结

    uni-app操作数据库的三种方法总结

    数据库操作的,可以采用多方案,下面这篇文章主要给大家介绍了关于uni-app操作数据库的三种方法,文中通过实例代码和图文介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • javascript算法解数独实现方案示例

    javascript算法解数独实现方案示例

    这篇文章主要为大家介绍了javascript算法解数独实现方案示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 可拖动可改变大小div的实现代码

    可拖动可改变大小div的实现代码

    可拖动可改变大小div的实现代码,非常不错的应用,大家可以参考下。
    2009-08-08
  • 学会javascript之迭代器

    学会javascript之迭代器

    本文主要讲解javascript之迭代器,在 JavaScript 中,迭代器是一个对象,它定义一个序列,并在终止时可能返回一个返回值。需要详细了解相关知识的小伙伴可以参考一下这篇文章
    2021-09-09
  • JS表单提交中onsubmit事件return的作用详解

    JS表单提交中onsubmit事件return的作用详解

    这篇文章主要为大家介绍了JS表单提交中onsubmit事件return的作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • axios请求设置responseType为'blob'或'arraybuffer'下载时如何正确处理返回值

    axios请求设置responseType为'blob'或'arraybuffer&apo

    这篇文章主要给大家介绍了关于axios请求设置responseType为'blob'或'arraybuffer'下载时如何正确处理返回值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • 用 js 写一个 js 解释器过程详解

    用 js 写一个 js 解释器过程详解

    这篇文章主要介绍了用 js 写一个 js 解释器过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • js鼠标点击图片实现随机变换图片的方法

    js鼠标点击图片实现随机变换图片的方法

    这篇文章主要介绍了js鼠标点击图片实现随机变换图片的方法,涉及鼠标事件与随机函数的使用技巧,需要的朋友可以参考下
    2015-02-02

最新评论