zoukankan      html  css  js  c++  java
  • 关于字符串replace方法第二个参数探究

      网上有关replace的文章很多了,这里主要聊聊它的第二个参数。阅读本文需要对replace方法有一定了解。W3school=>replace

      我们要把一段字符串中的某些指定字符替换掉,第一时间想到的就是replace方法,他的用法很简单,W3school上讲的清晰易懂。

      replace第一个参数一般放置的是正则表达式,用来匹配想要替换的文本;第二个参数一般我们放入的是字符串,用来替换掉正则匹配到的文本。

      其实replace远比上面说的要强大的多,它的内部已经封装的很完善了,远不是我们想象的那么简单,下面我们就来详细聊聊replace的第二个参数。

      现在要实现一个功能,把HTML中的字符实体转换成它们所对应的字符,比如:"&lt;"转换成对对应字符为:"<"。

      下面我们来看看代码实现:

      

     1 String.prototype.deentityfy=(function(){
     2             var entity = {
     3                 lt:'<',
     4                 gt:'>'
     5             };
     6             return function(){
     7                 return this.replace(/&([^&;]+);/g,
     8                     function(a,b,c,d){
     9                         console.log('a:'+a+'---b:'+b+'---c:'+c+'---d:'+d);
    10                         var r = entity[b];
    11                         return typeof r ==='string' ? r : a ;
    12                     })
    13             }
    14         }())
    15         document.write('&lt;h1&gt;我是标题&lt;/h1&gt;'.deentityfy());

      这里得讲讲字符实体,以免下面混淆。

      字符实体是不会当作HTML语句来解析的,比如上面的'&lt;h1&gt;我是标题&lt;/h1&gt;'这一段输出到页面上,我们看到的是这样的:

      

      <h1>只是被浏览器当作字符串输出,而不是标签输出,上面这段代码就是把这些字符实体转换成对应字符,能够被浏览器所编译。

      我们一步步来看上面的代码是怎么实现的。

      首先,给String对象的原型挂载了一个deentityfy方法,这个方法是个自执行函数,使用闭包的形式,函数内的所有内容对外都是不可见的。

      函数内,我们定义了一个entity对象字面量,里面有两个属性,分别对应标签的左右尖括号。

      接下来return一个匿名函数,把我们要做的事写在这个函数内。

      我们调用replace方法,第一个参数放置正则表达式:

    /&([^&;]+);/g

      这段正则表达式的匹配规则是:以"&"开头,后面紧跟一个或一个以上不是"&"和";"的字符,以";"结束。后面的g代表全局匹配。(更多有关正则表达式的学习请点击这里

      这里着重说下,正则中的"()"和javascript中运算时使用的"()"概念是不同的,这里的括号术语叫做:捕获括号。简单的说就是把括号内匹配到的字符暂时储存起来,在待会的替换环节可以取出来用。

      接下来详细讲讲replace的第二个参数,也就是本文的重点。

      我们一般是放一个字符串在第二个参数中,直接用于替换所匹配到的字符;还有更高阶的技巧,使用$字符可以取得捕获括号中的内容,再进行相关操作。具体可以查看W3school,里面都有讲。

      还有第三种方法, 给第二个参数传入匿名函数,函数的返回值用做替换的字符。

      匿名函数有4个参数可以传入,当然,这些参数都不是必须要传的。

      第一个参数:正则所匹配到的字符;

      第二个参数:捕获括号所捕获到的字符;

      第三个参数:正则匹配到的每段字符的第一个字符的索引;

      第四个参数:用于匹配的字符串主体;

      我把上面代码的运行结果打印出来大家应该就很清晰了:

      

       接触正则也快三年时间了,一直不知道正则还有这么强大的功能,当然也可能是我孤陋寡闻啦。希望大家永葆一颗学习的心,一起进步。

  • 相关阅读:
    单例模式
    json 格式
    axios 获取不到数据错误
    sprint test 添加事务回滚机制
    springboot An incompatible version [1.1.32] of the APR based Apache Tomcat Native library is installed, while Tomcat requires version [1.2.14]
    spring boot 启动之后404
    废了
    tomcat 部署项目到服务器
    Druid 介绍及配置
    jq 全选
  • 原文地址:https://www.cnblogs.com/chinajins/p/5772050.html
Copyright © 2011-2022 走看看