详解javascript replace高级用法

2023-08-28 22:30:05 81

在前端与后台交互的时候我们通常都需要将后台传递的数据绑定到html中，这个绑定数据的方式我们通常是使用jQuery或者使用原生的innerHTML进行绑定，当然也可以使用artTemplate模板来绑定数据，那么artTemplate模板它绑定数据的原理是什么呢？其实它就是利用了replace()方法。
对于正则replace约定了一个特殊标记符”$”：

1）、$i(i取值范围1~99)：表示从左到右正则子表达式所匹配的文本
2）、$&：表示与正则表达式匹配的全部文本
3）、$`(`：1旁边的那个键)：表示匹配字符串的左边文本
4）、$'('：单引号)：表示匹配字符串的右边文本
5）、$$：表示$转移

1、replace基本用法


/*要求将字符串中所有的a全部用A代替*/

varstr="javascriptisgreatscriptlanguage!";
//只会将第一个匹配到的a替换成A
console.log(str.replace("a","A"));
//只会将第一个匹配到的a替换成A。因为没有在全局范围内查找
console.log(str.replace(/a/,"A"));
//所有a都被替换成了A
console.log(str.replace(/a/g,"A"));

1.1、replace基本用法之替换移除指定class类


/*要求将下面这个元素中的unabled类移除掉*/

提交

varclassname=document.getElementById(“j_confirm_btn”).className; /*(^|\\s)表示匹配字符串开头或字符串前面的空格，(\\s|$)表示匹配字符串结尾或字符串后面的空格*/ varnewClassName=classname.replace(/(^|\\s)unabled(\\s|$)/,””); document.getElementById(“j_confirm_btn”).className=newClassName;

2、replace高级用法之----$i

2.1、简单的$i用法

2.2、$i与分组结合使用

2.3、$i与分组结合使用----关键字高亮显示

当我们使用谷歌搜索的时候我们会发现我们搜索的关键字都被高亮显示了，那么这种效果用JavaScript能否显示呢？答案是可以的，使用replace()很轻松就搞定了。

2.4、反向分组----分组的反向引用

在正则中，当我们需要匹配两个或多个连续的相同的字符的时候，就需要用到反向引用了，查找连续重复的字符是反向引用最简单却也是最有用的应用之一。上面的”$i”也是反向分组的一种形式，这里再介绍另一种反向分组。


/*/ab(cd)\1e/这里的\1表示把第1个分组的内容重复一遍*/

console.log(/ab(cd)\1e/.test("abcde"));//false
console.log(/ab(cd)\1e/.test("abcdcde"));//true

/*要求：将下列字符串中相领重复的部分删除掉"*/
varstr="abbcccdeee";
varnewStr=str.replace(/(\w)\1+/g,"$1");
console.log(newStr);//abcde

3、replace高级用法之参数二为函数

replace函数的第二个参数不仅可以是一个字符，还可以是一个函数！

3.1、参数二为函数之参数详解

3.2、参数二为函数之首字母大写案例

3.3、参数二为函数之绑定数据----artTemplate模板核心

周星驰喜剧电影：

vardata={ name:"功夫", protagonist:"周星驰" }, domStr='

名称：{{name}}

导演：{{protagonist}}

'; document.getElementById("content").innerHTML=formatString(domStr,data); /*绑定数据的核心就是使用正则进行匹配*/ functionformatString(str,data){ returnstr.replace(/{{(\w+)}}/g,function(matchingStr,group1){ returndata[group1]; }); }

4、replace高级用法之获取与正则表达式匹配的文本

4.1、replace高级用法之获取与正则表达式进行匹配的源字符串

4.2、replace高级用法之获取正则表达式匹配到的字符

5、replace高级用法之获取正则匹配的左边的字符

6、replace高级用法之获取正则匹配的右边的字符

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

详解javascript replace高级用法

周星驰喜剧电影：

热门推荐

随机推荐