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

Posted 2020-10-20 麦兜家园

关于大小写转化很简单就是两个方法，查教程也可以很明了，这里就简单写一下：

  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方法的，大部分都是万变不离其宗，都是这样的！所以，希望对大家有用！

 好了，今天就这样了！