关闭

javascript replace高级用法

时间: 2019-02-16阅读: 2257标签: 函数

前端与后台交互的时候我们通常都需要将后台传递的数据绑定到html中,这个绑定数据的方式我们通常是使用jQuery或者使用原生的innerhtml进行绑定,当然也可以使用artTemplate模板来绑定数据,那么artTemplate模板它绑定数据的原理是什么呢?其实它就是利用了replace()方法。

对于正则replace约定了一个特殊标记符”$”:

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


1、replace基本用法

<script type="text/JavaScript">
    /*要求将字符串中所有的a全部用A代替*/

    var str = "JavaScript is great script language!";
    //只会将第一个匹配到的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"));
</script>


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

<script type="text/javascript">
    /*要求将下面这个元素中的unabled类移除掉*/

    <div class=”confirm-btn unabled mb-10” id=”j_confirm_btn”>提交</div>
    var classname = document.getElementById(“j_confirm_btn”).className;
    /*(^|\\s)表示匹配字符串开头或字符串前面的空格,(\\s|$)表示匹配字符串结尾或字符串后面的空格*/
    var newClassName = classname.replace(/(^|\\s)unabled(\\s|$)/,””);
    document.getElementById(“j_confirm_btn”).className = newClassName;
</script>


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

2.1、简单的$i用法

<script>
    /*要求:将字符串中的双引号用"-"代替*/

    var str = '"a", "b"';
    console.log(str.replace(/"[^"]*"/g,"-$1-"));
    //输出结果为:-$1-, -$1-
    /*解释:$1就是前面正则(/"[^"]*"/g)所匹配到的每一个字符。*/
</script>


2.2、$i与分组结合使用

<script>
    /*要求:将下面字符串替换成:javascript is fn.it is a good script language*/
    
    var str = "javascript is a good script language";
    console.log(str.replace(/(javascript)\s*(is)/g,"$1 $2 fn.it $2"));
    /*解释:每一对括号都代表一个分组,从左往右分别代表第一个分组,第二个分组...;如上"*(javascript)"为第一个分组,
"(is)"为第二个分组。$1就代表第一个分组匹配的内容,$2就代表第二个分组匹配的内容,依此类推...*/
</script>


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

当我们使用谷歌搜索的时候我们会发现我们搜索的关键字都被高亮显示了,那么这种效果用JavaScript能否显示呢?答案是可以的,使用replace()很轻松就搞定了。
<script>
    /*要求:将下列字符串中的"java"用红色字体显示*/
    
    var str = "Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。
JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。
但JavaScript的主要设计原则源自Self和Scheme。";

    document.write(str.replace(/(java)/gi,'<span style="color: red;font-weight: 800;">$1</span>'));

    /*解释:必须要开启全局搜索和忽略大小写,否则匹配不到所有的”java”字符*/
</script>


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

在正则中,当我们需要匹配两个或多个连续的相同的字符的时候,就需要用到反向引用了,查找连续重复的字符是反向引用最简单却也是最有用的应用之一。上面的”$i”也是反向分组的一种形式,这里再介绍另一种反向分组。
<script type="text/javascript">
    /* /ab(cd)\1e/ 这里的 \1 表示把第1个分组的内容重复一遍*/

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

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


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

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


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

<script>
    var str = "bbabc";
    var newStr = str.replace(/(a)(b)/g,function (){
    console.log(arguments);//["ab", "a", "b", 2, "bbabc"]
     /*参数依次为:
        1、整个正则表达式所匹配到的字符串----"ab"
        2、第一个分组匹配到的字符串,第二个分组所匹配到的字符串....依次类推一直            到最后一个分组----"a,b"
        3、此次匹配在源字符串中的下标,返回的是第一个匹配到的字符的下标----2
        4、源字符串----"bbabc"
      */
    })
</script>


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

<script>
    /*要求:将下列字符串中的所有首字母大写*/
    
    var str = "Tomorrow may not be better, but better tomorrow will surely come!";
    var newStr = str.replace(/\b\w+\b/gi,function (matchStr){
        console.log(matchStr);//匹配到的字符
        return matchStr.substr(0,1).toUpperCase() + matchStr.substr(1);
    });
    console.log(newStr);
</script>


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

<h1>周星驰喜剧电影:</h1>
<div id="content"></div>
<script type="text/javascript">
    var data = {
        name: "功夫",
        protagonist: "周星驰"
    },
    domStr = '<div><span>名称:</span><span>{{name}}</span></div><div><span>导演:</span><span>{{protagonist}}</span> </div>';

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


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

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

<script>
    var str = "i am a good man";
    var newStr = str.replace(/good/g,"$&");
    console.log(newStr);//结果:输出i am a good man
    /*解释:在这里”$&”就是与正则表达式进行匹配的那个源字符串*/
</script>


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

<script>
    /*要求:将"i am a good man"替换成"i am a good-gond man" */
    
    var str = "i am a good man";
    var newStr = str.replace(/good/g,"$&-$&");
    console.log(newStr);
    /*解释:在这里”$&”可以获取到前面正则表达式匹配的内容,如上面的”$&”就是正则表达式匹配到的”good”*/
</script>


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

<script>
   /*要求:将下列字符串替换成"java-java is a good script"*/

    var str = "javascript is a good script";
    var newStr = str.replace(/script/,"-$`");
    console.log(newStr)
    /*解释:"$`"获取的是正则左边的内容,如上正则中"script"字符前面的是"java","-$`"就是"-java","-$`"会把script替换掉。*/
</script>


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

<script>
     /*要求:将下列字符替换成"java is a good language!it is a good script is a good script"*/
     
    var str = "javascript is a good script";
    var newStr = str.replace(/script/," is a good language!it$'");
    console.log(newStr)
    /*解释:"$'"获取的就是str右边的内容,如上正则中"$'"就是" is a good script"。
    " is a good language!it$'"会把正则匹配到的"script"替换掉*/
</script>


来自:https://segmentfault.com/a/1190000018173355


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2036

关闭

理解JavaScript Call()函数原理

对于 fn1.call(fn2);我能够理解,这段代码仅仅 使得 fn1对象的this指向了fn2;但是最终不影响fn1函数的执行。因为fn1中不包含对this的操作。不过 fn1.call.call(fn2);实在是令我费解

js函数

在JavaScript中,函数其实就是对象。使函数不同于其他对象的决定性特点是函数存在一个被称为[[Call]]的内部属性。内部属性无法通过代码访问而是定义了代码执行时的行为。ECMAScript为JavaScript的对象定义了多种内部属性

a标签调用js函数写法总结

这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

注入eval, Function等系统函数,截获动态代码

现在很多网站都上了各种前端反爬手段,无论手段如何,最重要的是要把包含反爬手段的前端javascript代码加密隐藏起来,然后在运行时实时解密动态执行。动态执行js代码无非两种方法,即eval和Function。

js类的constructor中不支持异步函数吗?

如果是普通函数,可以用async 和await来解决你的问题。但你这个是在constructor里,constructor 的作用是返回一个对像实例,如果加了async就变成返回一个promise了,所以这个方法行不通

js构造函数的方法

类方法是不需要进行实例化就可以使用的方法;反而实例化之后,类方法在实例中不可用。对象方法和原型方法,只有实例化之后才可以使用。

你也许不知道的javascript高级函数

高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们。简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。例如Array.prototype.map,Array.prototype.filter,Array.prototype.reduce 都是一些高阶函数。

JavaScript中的函数式编程

函数式编程是一种编程范式,是一种构建计算机程序结构和元素的风格,它把计算看作是对数学函数的评估,避免了状态的变化和数据的可变

js之惰性函数

惰性函数是js函数式编程的另一个应用,惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,他的应用情景在于当我们遇到一个需要判断场景去调用不同的方法时,避免重复进入函数内的if判断,也就是说if判断只进行一次,之后函数就会被分支里的代码替换掉

JS中的setTimeout()函数

setTimeout() 方法用于在指定的毫秒数后调用函数或执行表达式。返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行。第三个及之后的参数是setTimeout()函数的可选参数,是作为参数传给 setTimeout() 方法里面的匿名函数或者调用的函数

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!