zoukankan      html  css  js  c++  java
  • 运用正则+replace+substring将一段英语的字母大写 angurlar运用自定义指令filter完成首字母大写

    复习下js基础并运用正则+replace+substring将一段英语的字母大写

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>首字母大写</title>
    </head>
    <body>
    <div class="dv"></div>
    </body>
    </html>
    <script>
    var str = "this is a javascript string";
    str = str.replace(/w+/g,function(word){ //运用正则方式将语句截取成一个一个的单词
    console.log(word);//打印出来截取的字符串
    console.log(word.substring(0,1).toUpperCase())//将截取的首字母大写
    console.log(word.substring(0,1).toUpperCase()+word.substring(1)) //将大写的字符串拼接到未大写的上面
    return word.substring(0,1).toUpperCase()+word.substring(1);//将所有的字符return出去
    })
    document.write(str)//在页面上打印出来
    </script>

    配合angularjs 的自定义指令将命令输出

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>Document</title>

    </head>
    <style>
    input.ng-invalid{
    background: red;
    }
    </style>
    <body>
    <div ng-app="myApp" ng-init='firstName="Jon"' ng-controller="mycrl">

    <input type="text" ng-model="name" required/>
    <h2>年龄:{{age}}</h2>
    {{ str | toUpercase}} //输出结果
    </div>
    </body>
    </html>

    <script src="js/angurlar素材/angular/angular.js"></script>
    <script>


    var app =angular.module("myApp",[]);
    app.controller("mycrl",function($scope){
    $scope.name="";
    $scope.age =18;
    $scope.str= "this is my first work"
    });
    app.filter("toUpercase",function(){//自定义指令
    return function(str){
    return str.replace(/w+/g,function(word){//replace配合正则截取每一个单词
    return word.substring(0,1).toUpperCase()+word.substring(1);//运用substring截取每个单词的首字母并大写
    });

    }
    })
    </script>

    这样就输出个简单的angular应用了

  • 相关阅读:
    Zabbix客户端日志出现(Not all processes could be identified, 解决
    zabbix 本地编译安装
    redis 配置文件解释 以及集群部署
    Unix shell范例精解 课后题
    if __name__ == '__main__':用法
    爬取猫眼电影100榜单 代码
    CentOS编译安装软件过程中遇到zlib.h: No such file or directory
    Codeigniter添加Composer支持
    CodeIgniter composer.json安装第三类库操作
    使用composer命令加载vendor中的第三方类库 的方法
  • 原文地址:https://www.cnblogs.com/a8497336/p/6745503.html
Copyright © 2011-2022 走看看