js第十一节-字符串方法_js节字符串-CSDN博客

本文链接：https://blog.csdn.net/chenminglvming/article/details/51100723

js第十一节-字符串方法

一、概念介绍

var str = '前端学习-WWW.dream.com';

str.charAt(1);           // '端'
str.charCodeAt(1);           // 21619
String.fromCharCode(22937, 21619);   // '前端'

str.indexOf('m', 4);           // 9 //其中4代表是从第四位开始找
str.lastIndexOf('o');           // 16

'1000' < '2'           // true
'1000' > 2           // true

str.substring(0, 4);           // '前端学习'
str.slice(-3);           // 'com'

str.toUpperCase();           // '前端学习-WWW.DREAM.COM'
str.toLowerCase();           // '前端学习-www.dream.com'

str.split('.', 2);           // [ '前端学习-WWW', 'dream' ]

var arr = [ 'www', 'dream', 'com' ];
arr.join('aaa');           // 'www.dream.com'

二、作业评析

1.查找替换删除操作

代码分享：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
window.onload = function(){
	var aInput = document.getElementsByTagName('input');
	var oP = document.getElementsByTagName('p')[0];
	//查找事件
	aInput[1].onclick = function(){
		if(!aInput[0].value) alert('请您输入要查找的内容！');
		oP.innerHTML = oP.innerHTML.split(aInput[0].value).join('<span class="span1">'+aInput[0].value+'</span>');
	};
	//替换事件
	aInput[3].onclick = function(){
		if(!aInput[2].value || !aInput[0].value) alert('请您输入要查找或者替换的内容！');
		oP.innerHTML = oP.innerHTML.split(aInput[0].value).join('<span>'+aInput[2].value+'</span>');
	};
	//删除事件
	aInput[5].onclick = function(){
		if(!aInput[4].value) alert('请填写要删除的内容！');
		oP.innerHTML = oP.innerHTML.split(aInput[4].value).join('');
	};
};
</script>
<style>
span{background:green;}
.span1{background:yellow;}
</style>
</head>

<body>
<input type='text'/><input type='button' value='查找' />
<input type="text" /><input type='button' value='替换' />
<input type="text" /><input type='button' value='删除' />
<p style='width:600px;height:200px;border:4px solid #c0c0c0;'>
2015年4月，无界空间仅用了一周半的时间签下SPA。短短不到一个月，便拿到由梅花天使领投，经纬创投、青山资本跟投的天使轮融资，受到资本圈竞相追捧。
2015年7月，无界空间百子湾站正式开幕，占地面积1000平米，提供150个创业者办公工位；
2016年1月，无界空间望京南站开幕，占地1400平米，提供190个工位；
2016年2月1日，无界空间望京国际站正式运营，占地2700平米，提供450个工位；
2016年2月15日，无界空间三元桥站投入使用，占地2400平米，490个工位向创业者开放。刚刚开放参观一周，签约公司已达50%以上；
目前，无界空间在朝阳大悦城的店面正在准备中，占地将突破3000平米，将提供超过600个工位，计划从今年4月开始正式迎接创业者的入驻；
</p>
</body>
</html>

2.文字搬运工

代码分享：

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字搬运工</title>
<style>
p{margin:0;padding:0;}
#wrap{width:920px;height:200px;border:6px solid #c0c0c0;margin:60px auto;}
.left{width:400px;height:200px;background:yellow;float:left;}
.center{width:120px;height:60px;float:left;}
.right{width:400px;height:200px;background:blue;float:left;}
span{margin-left:40px;}
</style>
<script>
window.onload = function(){
	var oTitle1 = document.getElementById('title1');
	var oTitle2 = document.getElementById('title2');
	var oModual = document.getElementById('modual');
	var oCount = document.getElementById('count');
	var arr = [];
	var timer = null;
	var num = 0;
	var len = 0;	//这个要放在点击事件外面，否则每次点击的时候都会重新计算长度和分割数组。影响结果。
	arr = oTitle1.innerHTML.split('');
    len = oTitle1.innerHTML.length;
	oModual.onclick = function(){
		clearInterval(timer);
		//文字右移
	    if(oTitle1.innerHTML.length != 0){	
	        timer = setInterval(function(){
			//右边文字一个个增加
		    oCount.innerHTML = num + '/'+ (len - 1);
		    oTitle2.innerHTML = oTitle2.innerHTML + arr[num];
			num++;
			//左边文字一个个减少
			oTitle1.innerHTML = oTitle1.innerHTML.substring(1,oTitle1.innerHTML.length);
			if(num == arr.length){
			    num = 0;
				clearInterval(timer);
			}
		},50);
		}
		
	};
};
</script>
</head>

<body>
<div id='wrap'>
<div class='left'>
<p id='title1'>自去年下半年开始的资本寒冬，让许多创业项目在寒风中摇曳不定，举步维艰。而无界空间却正是在这段时间迅速扩张，势如破竹。在无界空间创始人Randy看来，其实那个冬天并不冷，资本只是打了一个哆嗦。</p>
</div>
<div class='center'>
<input type='button' value="把文字进行右移" id='modual'/><br />
<span id='count'>?/?</span>
</div>
<div class='right'>
<p id='title2'></p>
</div>
</div>
</body></span>
<span style="font-size:18px;"></html></span>

下一节我们讲讲数组的方法，这是我们js基础部分最后一节，大家一定要把陈明吕老师上课讲的内容好好的复习一下，谢谢大家。