javascript中的replace函数(带注释demo)

javascript这门语言一直就像一位带着面纱的美女，总是看不清，摸不透，一直专注服务器端，也从来没有特别重视过，直到最近几年，javascript越来越重要，越来越通用。最近和前端走的比较近，借此机会，好好巩固一下相关知识点。

1.初识replace

在js中有两个replace函数 一个是location.replace(url) 跳转到一个新的url

一个string.replace("xx","yy") 替换字符串 返回一个新的字符串，该方法并不改变字符串本身

location.replace(url) 无痕跳转(将当前链接导航到一个新的url 并不保存历史记录)
与之相对的是location.href="url" rel="external nofollow" 有痕跳转(将当前链接导航到一个新的url 且保存历史记录) 这个没有比较清晰

string.replace函数 很多初学者，会认为这个跟C#中的Replace一样，但并不相同，js中replace更灵活。
最基本的用法 就是简单替换字符串。来看一个例子：

var str = "abcd-abcd-abcd";
var result = str.replace("a", "");
console.log(result);
//输出 bcd-abcd-abcd
//当第一个参数是一个简单字符串时，仅替换第一个匹配项

2.走进replace之正则表达式

参数一：正则表达式对象或字面量(支持gi模式) g全局匹配 i忽略大小写

参数二：要替换的字符串或一个function

可以使用正则表达式的相关引用

如果是function，则替换为function的返回值

此function的参数：

match 匹配的子串。（对应于上述的$&。）

p1,p2, ... 假如replace()方法的第一个参数是一个RegExp 对象，则代表第n个括号匹配的字符串。（对应于上述的$1，$2等。）

offset 匹配到的子字符串在原字符串中的偏移量。（比如，如果原字符串是“abcd”，匹配到的子字符串是“bc”，那么这个参数将是1）

string 被匹配的原字符串。

正则表达的引用

$$ 插入一个 "$"。
$& 插入匹配的子串。
$` 插入当前匹配的子串左边的内容。
$' 插入当前匹配的子串右边的内容。
$n 假如第一个参数是 RegExp对象，并且 n 是个小于100的非负整数，那么插入第 n 个括号匹配的字符串。

3.来一轮带注释的demo，彻底搞懂javascript中的replace函数：

全局匹配：

var str = "abcd-abcd-abcd";
var result = str.replace(/a/g, "e");
console.log(result);
//输出 ebcd-ebcd-ebcd
//g全局匹配 所有a字符串都将被替换

忽略大小写匹配：

var str = "abcd-abcd-abcd";
var result = str.replace(/A/i, "e");
console.log(result);
// 输出 ebcd-abcd-abcd
// 忽略大小写的匹配 但没有进行全局匹配 所以只替换第一个a

忽略大小写且全局匹配：

var str = "abcd-abcd-abcd";
var result = str.replace(/A/gi, "e");
console.log(result);
// 输出 ebcd-ebcd-ebcd
// 忽略大小写并全局匹配 所有a都被替换

使用function作为第二参数：

var str = "abcd-abcd-1234";
var result = str.replace(/([a-z]*)-([a-z]*)/gi, function(match,p1,p2,offset,str){
  console.log(match);  //abcd-abcd 匹配的内容
  console.log(p1);  //第一个括号中匹配的内容
  console.log(p2);  //第二个括号匹配的内容
  console.log(offset);//0 匹配到的字符串的索引(偏移量)
  console.log(str);  //原始字符串
  return [p1,p2].join("+");
});
console.log(result);
// 输出 abcd+abcd+1234
// 原字符串中 abcd-abcd 被匹配后 被替换为function返回的内容

在参数中引用正则表达式匹配项：

var str = "a b";
var result = str.replace(/(\w+)\s(\w+)/gi, "$2 $1");
console.log(result);
//输出 b a
// 这里的$1 $2分别引用正则表达式中第一个喝第二个括号匹配的内容

在参数中引用匹配项左侧内容：

 var str = 'abc';
  var result = str.replace(/b/g, "$`"); //$`代表匹配字符的左侧内容
  console.log(result);
  //输出： aac

在参数中引用匹配项右侧内容：

 var str = 'abc';
  var result = str.replace(/b/g, "$'"); //$'代表匹配字符的右侧内容
  console.log(result);
  //输出： acc

使用正则表达式对象：

 var str = "a b";
 var reg = new RegExp(/(\w+)\s(\w+)/, "gi"); //也可以使用正则表示对象来最为参数
 var result = str.replace(reg, "$2 $1");
 console.log(result); //输出 b a

有了这些例子 加上开头的名词解释，相信你已经彻底搞懂了javascript中的replace函数！

总结

以上所述是小编给大家介绍的javascript中的replace函数(带注释demo)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同

    1.<script language="javascript"> var str = "ajfhslajd and"; //在此我想将字母a替换成字母A alert(str.replace("a","A")); </script> 结果:是只有替换了字符串的首字符a 这不是我要的结果 看↓ 2.replace()支持正则表达式,它可以按照正则表达式的规则匹配字符或字符串,然后给予替换! <scri

  • javascript中使用replaceAll()函数实现字符替换的方法

    而str.replace(/\-/g,"!")则可以全部替换掉匹配的字符(g为全局标志). replace() The replace() method returns the string that results when you replace text matching its first argument (a regular expression) with the text of the second argument (a string). If the g (glob

  • js正则函数match、exec、test、search、replace、split使用介绍集合

    js正则函数match、exec、test、search、replace、split使用介绍集合

    match 方法 使用正则表达式模式对字符串执行查找,并将包含查找的结果作为数组返回. stringObj.match(rgExp) 参数 stringObj 必选项.对其进行查找的 String 对象或字符串文字. rgExp 必选项.为包含正则表达式模式和可用标志的正则表达式对象.也可以是包含正则表达式模式和可用标志的变量名或字符串文字. 其余说明与exec一样,不同的是如果match的表达式匹配了全局标记g将出现所有匹配项,而不用循环,但所有匹配中不会包含子匹配项. 例子1: functi

  • js正则表达式之replace函数用法

    正则表达式replace()函数: 此函数用指定的字符串替换字符串中与正则表达式匹配的子字符串. 返回值是一个替换后的新字符串. 这里只介绍正则表达式的相关操作,其他替换操作可以参阅javascript的String对象的replace()方法一文. 语法结构: stringObject.replace(regexp,replacement) 参数列表如下: 参数名称 语义解释 regexp 必需.RegExp对象. replacement 必需.一个字符串值.规定了替换文本或生成替换文本的函数

  • js中字符替换函数String.replace()使用技巧

    定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法 stringObject.replace(regexp/substr,replacement)参数 描述 regexp/substr 必需.规定子字符串或要替换的模式的 RegExp 对象. 请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象.   replacement 必需.一个字符串值.规定了替换文本或生成替换文本的函数.

  • 关于JS字符串函数String.replace()

    替换匹配给定正则表达式的(一个或多个)子串 string.replace(regexp, replacement) 参数: regexp: RegExp对象或者字符串 replacement: 替换文本的字符串,或者一个函数,用于在调用时生成对应的替换文本. 返回: 返回一个替换好的新字符串 描述: replacement可以是字符串或一个函数.如果是一个函数,它将在每个匹配结果上调用,它返回的字符串将作为替换文本. 传入该函数的参数: 1) 匹配该模式的字符串 2) 匹配该模式中某个圆括号子表

  • JavaScript String.replace函数参数实例说明

    Email:longsu2010 at yeah dot net js String的replace函数的函数签名如下: replace(match/* 字符串OR正则表达式 */, replacement/* 字符串OR函数 */) 作用是将源自符串中的match替换为replacement并返回替换后的字符串. 如果第一参数是字符串就没什么好说的了,但是要记住此时只在源自符串替换一次match(第一次)函数就执行完成了. 所以第一参数通常是一个正则表达式,举例如下: replace(/a/g

  • JSP中的字符替换函数 str_replace() 实现！

    //// StrReplace.java//package forum;import java.util.*; /*** Title:* Description:* Copyright: Copyright (c) 2001* Company:* @author* @version 1.0*/ public class StrReplace { public StrReplace() {}public String str_replace(String from,String to,String

  • javascript中的replace函数(带注释demo)

    javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此机会,好好巩固一下相关知识点. 1.初识replace 在js中有两个replace函数 一个是location.replace(url) 跳转到一个新的url 一个string.replace("xx","yy") 替换字符串 返回一个新的字符串,该方法并不改变字符串

  • javascript中基于replace函数的正则表达式语法

    示例代码如下: var strM = "javascript is a good script language"; //在此我想将字母a替换成字母A alert(strM.replace("a","A")); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 它只替换了首字母.但如果加上正则表达式结果就不一样了!replace()支持正则表达式,它可以按照正则表达式的规则匹配字符或字符串,然后给予替换! 注意:被替换的部分不用加双引号

  • JavaScript中的工厂函数(推荐)

    JavaScript中的工厂函数(推荐)

    在学习jQuery的时候,我们经常会看到"工厂函数"这个概念,那么究竟什么是"工厂函数"呢?我们来看看概念,"所谓工厂函数,就是指这些内建函数都是类对象,当你调用他们时,实际上是创建了一个类实例".意思就是当我调用这个函数,实际上是先利用类创建了一个对象,然后返回这个对象.由于Javascript本身不是严格的面向对象的语言(不包含类),实际上来说,Javascript并没有严格的"工厂函数",但是在Javascript中,我

  • JavaScript中cookie工具函数封装的示例代码

    一. 语法 1.1 获取当前页面的所有cookie: var allCookies = document.cookie; allCookies 是一个字符串,其中包含了以分号分隔的cookie列表字符串 (即 key=value 键值对). 1.2 写一个新cookie: document.cookie = updatedCookie; updatedCookie是一个键值对形式的字符串.只能用这个方法一次设置或更新一个cookie,而且写入并不是覆盖,而是添加.例如: document.coo

  • JavaScript中利用构造器函数模拟类的方法

    前言 本文小编带大家一起学习的是在 JavaScript 中使用构造器函数(construcor function)模拟类.下面话不多说,感兴趣的朋友们下面来一起看看吧. 构造器函数简介 你可以使用 ES6 的 class 关键字来实现类,不过我建议你使用传统的构造器函数来模拟类,因为这样可以给人一种你是个 JavaScript 老手的错觉,哈哈! 什么是构造器函数?构造器函数是编写对象的方法之一.一般情况下,你可以这样编写一个对象: var obj = { a:1, b:2 }; 但也可以使用

  • JavaScript中的Function函数

    首先给大家介绍JavaScript中function定义函数的几种方法: 1.最基本的作为一个本本分分的函数声明使用. 复制代码 代码如下: function func(){} 或 复制代码 代码如下: var func=function(){}; 2.作为一个类构造器使用: function class(){} class.prototype={}; var item=new class(); 3.作为闭包使用: (function(){ //独立作用域 })(); 4.可以作为选择器使用:

  • mysql中的replace函数替换字符串问题

    目录 mysql中replace函数替换字符串 介绍下mysql的REPLACE()函数 ①select 可以直接用(声明curl ,显示需求等) ②UPDATE语句中使用REPLACE函数的语法如下 ③嵌套使用的情况 总结 mysql中replace函数替换字符串 介绍下mysql的REPLACE()函数 语法: REPLACE()函数的语法如下: REPLACE(str,old_string,new_string); 参数: REPLACE()函数有三个参数,它将string中的old_st

  • javascript中Array()数组函数详解

    在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array =

  • JavaScript中字符串分割函数split用法实例

    本文实例讲述了JavaScript中字符串分割函数split用法.分享给大家供大家参考.具体如下: 先来看下面这段代码: <script type="text/javascript"> var str="How are you doing today?" document.write(str.split(" ") + "<br />") document.write(str.split("&q

  • JavaScript中push(),join() 函数 实例详解

    定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

随机推荐