JavaScript中的innerText、innerHTML、正则表达式和日期处理（五）

一、innerText和innerHTML

这两个属性有些相似，我之前就对它们的区别很模糊，今天在这里明确的说一说。

• 对元素的innerText属性赋值，浏览器会把属性值当中的html标签处理成普通字符串，然后显示
• 对元素的innerHTML属性赋值，浏览器会把属性值当做html代码解释执行
• innerText属性有兼容性问题，需要进行兼容性处理
• 读取元素的innerText属性，会去除其中的html标签，然后返回剩余内容
• 读取元素的innerHTML属性，会把其中的html标签处理成普通字符串，然后返回

<script type="text/javascript">
    function addInnerText(){
        var myos = appInfo();
        var div1 = window.document.getElementById("div1");
        if("firefox"==myos.appname){
        div1.textContent = "<font color='blue'>innerText</font>";
        }else if("msie"==myos.appname){
            div1.innerText = "<font color='blue'>innerText</font>";
        }else{
            div1.innerText = "<font color='blue'>innerText</font>";
        }
    }

    function addInnerHTML(){
        var div2 = document.getElementById("div2");
        div2.innerHTML = "<font color='blue'>innerHTML</font>";
    }

    function getInfo(){
        var div1 = window.document.getElementById("div1");
        alert("div1.innerText="+div1.innerText);//div1.innerText=<font color='blue'>innerText</font>
        alert("div1.innerHTML="+div1.innerHTML);//div1.innerHTML=&lt;font color='blue'&gt;innerText&lt;/font&gt;
        var div2 = window.document.getElementById("div2");
        alert("div2.innerText="+div2.innerText);//div2.innerText=innerHTML
        alert("div2.innerHTML="+div2.innerHTML);//div2.innerHTML=<font color="blue">innerHTML</font>
    }

    // 获取浏览器名称及版本信息
    function appInfo(){ 
        var browser = { 
            msie: false, firefox: false, opera: false, safari: false, 
            chrome: false, netscape: false, appname: 'unknown', version: 0 
        }, 
        userAgent = window.navigator.userAgent.toLowerCase(); 
        if ( /(msie|firefox|opera|chrome|netscape)\D+(\d[\d.]*)/.test( userAgent ) ){ 
            browser[RegExp.$1] = true; 
            browser.appname = RegExp.$1; 
            browser.version = RegExp.$2; 
        } else if ( /version\D+(\d[\d.]*).*safari/.test( userAgent ) ){ // safari 
            browser.safari = true; 
            browser.appname = 'safari'; 
            browser.version = RegExp.$2; 
        }
        return browser;
    }
</script>

二、正则表达式

• 正则表达式是一门独立的学科，和任何编程语言无关，在编程中使用正则表达式主要是用来校验字符串的格式
• JavaScript中创建正则表达式的语法：
  var regExp = /正则表达式/flag; 示例：var regexp = /aaa/g;
  var regExp = new RegExp(正则表达式,flag); 示例：var regexp = new RegExp(“aaa”,”g”);
• flag的可选值
  i：表示忽略大小写
  g：表示搜索当前行的所有数据
  m：表示支持多行搜索
• test()方法
  regExp.test(字符串);，返回值为true表示符合正则表达式的格式，返回值为false表示不符合正则表达式的格式

<script type="text/javascript">
    var str = "2018-01-01";
    var regExp = /-/;
    var value = str.replace(regExp,",");
    alert("value="+value);//value=2018,01-01
    regExp = /-/g;
    value = str.replace(regExp,",");
    alert("value="+value);//value=2018,01,01
    regExp = new RegExp("-","");
    value = str.replace(regExp,",");
    alert("value="+value);//value=2018,01-01
    regExp = new RegExp("-","g");
    value = str.replace(regExp,",");
    alert("value="+value);//value=2018,01,01
</script>

三、日期处理

<script type="text/javascript">
    var now = new Date();
    alert(now);//Fri Nov 23 2018 21:30:21 GMT+0800 (中国标准时间)
    //将时间转换为本地样式
    var localNow = now.toLocaleString();
    alert(localNow);//2018/11/23 下午9:30:21
    //按照自己喜欢的格式显示时间
    //getFullYear()可以避免千年虫情况
    var fullYear = now.getFullYear();
    alert("fullYear="+fullYear);//fullYear=2018
    var month = now.getMonth();
    alert("month="+month);//month=10
    var day = now.getDate();
    alert("day="+day);//day=23
    //getTime()返回的是自1970:01:01 00:00.000到现在的毫秒数
    var time = now.getTime();
    alert("time="+time);//time=1542979821734
</script>

常用方法截图如下：