• replace()方法解析


    search(),match(),用于查找指定字符串返回首次出现的索引值与指定的字符串。这篇我们讲找到指定字符串之后将其替换掉。直接贴:

    var str="Visit Microsoft!"
    console.log(str.replace(/Microsoft/, "W3School"))
    

    输出:Visit W3School!

    代码直观就能看出,用后半部分的W3School把前半部分指定检索字符串的Microsoft字符替换掉了。

    前半部分:寻找需要替换的字符串

    后半部分:要替换的字符串内容

    后面替换前面,先找,后替换。

    好,我们来看看加了全局替换符的效果

    var str="Welcome to Microsoft! "
    str=str + "We are proud to announce that Microsoft has "
    str=str + "one of the largest Web Developers sites in the world."
    
    console.log(str.replace(/Microsoft/g, "W3School"))
    

    输出:"Welcome to W3School! We are proud to announce that W3School has one of the largest Web Developers sites in the world."

    因为加了g所以执行全局替换,第一个str中的Microsoft被替换了,第二个中的也被替换了。那如果我不加g会有什么效果呢?我们来看看:

    输出:"Welcome to W3School! We are proud to announce that Microsoft has one of the largest Web Developers sites in the world."

    第一个str中的Microsoft被替换了,但是第二个没有被替换,因为没有全局查找替换,所以只替换了第一个。

    好,我们来看看忽略大小写在这个方法里的使用

    text = "javascript Tutorial";
    text.replace(/javascript/i, "JavaScript");
    
    text = "javascript Tutorial";
    text.replace(/JAVASCRIPT/i, "JavaScript");
    

      输出:"JavaScript Tutorial"

    因为加了i,忽略了查找时对字符串的大小写,只要内容对上就找到了,所以两端输出的结果一致。

    好,我们来看看用replace()方法来转换姓名的格式问题,例:

    把"Doe,John"转换为"John Doe"的格式,贴代码:

    name = "Doe, John";
    name.replace(/(w+)s*, s*(w+)/, "$2 $1");
    

      输出:"John Doe"

    我们看输出结果已经将姓名格式转换成功了,姓和名换了位置,且去掉了逗号改为空格。好,我们来解析下代码。

    前面是需要查找的字符串正则表达式,w查找单词字符,s*查找空白字符。这样,就连成了规格字符串了。$2表示后面,$1表示前面。

    好,我们来看看把字符串中所有双引号替换为单引号

    name = '"a", "b"';
    name.replace(/"([^"]*)"/g, "'$1'");
    

      输出:"'a', 'b'"

    /"([^"]*)"/g是查找所有的"

    好,再来看下将首字母替换为大写的例子:

    name = 'aaa bbb ccc';
    uw=name.replace(/w+/g, function(word){
      return word.substring(0,1).toUpperCase()+word.substring(1);}
      );
    

      输出:"Aaa Bbb Ccc"

    代码解析:匹配单词边界,w查找单词字符,后半部分定义了一个函数,函数返回值用于替换单词边界。substring()用于提取字符串中介于两个下标之间的字符。toUpperCase()用于把字符串转为大写,先将第一个单词的第一个字符转为大写然后拼接上后面的。

  • 相关阅读:
    CSS文本过长时设置省略号
    css设置边框四角样式
    最通俗易懂的flex讲解
    原型与原型链详解
    Vue+Element中Table懒加载,新增、删除操作后手动更新
    docker +node 部署vue项目的心路历程
    centOS 7 添加删除用户和用户组
    图表工具FusionCharts Amcharts Highcharts jscharts
    做好PM的几个关键事项
    Bash . configure permission denied错误
  • 原文地址:https://www.cnblogs.com/clear93/p/5542520.html
Copyright © 2020-2023  润新知