原生js中大小寫轉化以及split分割字符串方法

關於大小寫轉化很簡單就是兩個方法，查教程也可以很明了，這里就簡單寫一下：

  var str0="baidu";
  str0.toUpperCase() ;      //轉為大寫
  str0.toLowerCase() ;      //轉為小寫

然后來說一下split()的方法：具體可以常見的幾種返回結果如下：

       var str="baidu.com";
        alert(str.split(".") );    //返回的是['baidu','com']

        var str1="baidu";
        alert(str1.split("") );     //返回的是['b','a','i','d','u']

        var str2="麥兜";
        alert(str2.split("") );     //返回的是['麥','兜']

        var str3="麥兜是頭可愛豬";
        alert(str3.split("可愛") );     //返回的是['麥兜是頭','豬']

        var str4 = '2018-01-09-18-00';
        alert(str4.split("-",3) );     //返回的是['2018','01','09']     

然后知道這些的話，來看下簡單的小例子：在下面input里輸入內容點擊發送，然后將內容推送到上面方框中，並將推送的文字都加上背景色

先寫一下布局：

css：
    div { width:300px; height:200px; border:1px solid #333; background:#fff; padding:20px; line-height:40px; }
    span { padding:5px 15px; font-family:微軟雅黑; }

html：
<div id="box"></div>
<input type="text" />
<input type="button" value="發送" />

重點來看js，這里就運用到了split()方法了：

<script>
    window.onload=function(){
        var inp=document.getElementsByTagName("input");
        var oBox=document.getElementById("box");
        var arrColor=["#ff0","#00f","#f00","#ff6100"]
        inp[1].onclick=function(){
            var str=inp[0].value;
            var arr =str.split("");
            for(var i=0;i<arr.length;i++){
                arr[i]='<span style="background:' + arrColor[i%arrColor.length] + ';">'+arr[i]+'</span>'
            }
            oBox.innerHTML += arr.join('');//join('')是將數組轉化為字符串
        }
    };

</script>

運行效果圖如下：

當然，這種例子項目中用的應該不多，但是好多類似原理的運用到split方法的，大部分都是萬變不離其宗，都是這樣的！所以，希望對大家有用！

 好了，今天就這樣了！