分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

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

发布时间:2023-09-06 01:35责任编辑:彭小芳关键词:js

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

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

 好了,今天就这样了!

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

原文地址:https://www.cnblogs.com/web001/p/8253475.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved