1.str.length()获取字符串的长度
2.str.charAt(i)获取相应位置的字符(i不写时默认0,超过字符串本身长度时返回空)
3.str.charCodeAt(i)获取相应位置字符的unicode编码,不写时i默认为0
4.String.fromCharCode(),根据传入的编码值返回相应的字符,可以传入多个编码,用“,”分开。(此方法为静态方法,String不能缺省)
例1:用一个文本框和按钮,规定文本框里输入的每个字符必须为数字(封装一个函数),原理用str.charCodeAt()来判断每个字符的编码
<body>
<input type="text" id="input1" placeholder="请输入内容" />
<button id="btn1">查看是否输入数字</button>
<script>
var oInput=document.getElementById("input1");
var oBtn=document.getElementById("btn1");
var arr=[];
oBtn.οnclick=function (){
var str=oInput.value;
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)<48||str.charCodeAt(i)>57){
arr.push(str.charAt(i));
}
}
if(i==str.length-1){
alert("是数字!");
}else{
alert("不是数字!其中"+arr+'不是数字');
}
}
</script>
</body>
例2:利用 Unicode 编码做一个输入内容加密的效果
<body>
<input type="text" id="input1" placeholder="请输入内容" />
<button id="btn1">加密</button><
p id="p1" style="font-size:16px;"></p>
<script>
var oInput=document.getElementById("input1");
var oBtn=document.getElementById("btn1");
var oP=document.getElementById("p1");
oBtn.οnclick=function (){
var str1='';
var str=oInput.value;
for(var i=0;i<str.length;i++){
str1+=String.fromCharCode(str.charCodeAt(i)+200);
}
oP.innerHTML=str1;
}
</script>
</body>
5.str.indexOf('',i)获取引号中字符(字符串)在该字符串中第一次出现的位置,未找到返回-1;第二个参数是开始查找的位置,不写或写为负数则默认从0开始找;
6.str.IndexOf('',i)获取引号中字符(字符串)在该字符串中最后一次出现的位置,未找到返回-1;第二个参数是开始查找的位置,不写或写为负数则默认从最后一位开始找;
例3:练习:从一段字符串(’在新学期里有新学期的样子开始新学期’)里找到每个’学期’的位置和一共出现的次数
<body>
<script>
var str='在新学期里有新学期的样子开始新学期';
s='新学期';var num=0;var arr=[];
fn();function fn(){
for(var i=0;str.indexOf(s,i)!=-1;i=str.indexOf(s,i)+s.length){
num++;
arr.push(str.indexOf(s,i));
}
alert("共出现了"+num+"个"+"' "+s+" ',其中位置分别在"+arr+"处");
}</script></body>
7.字符串比较大小:比较第一个字符的unicode编码值,例如
<script>
var str1='099999';
var str2='100000';
alert(str1>str2);
</script>
8.str.substring(i,j)
a.截取从第一个参数到第二个参数(不包括第二个参数)的字符串;
b.缺省第二个参数时,会截取从第一个参数开始到最后一位的字符串;
c.一般情况下书写时第二参数总是大于第一个参数,如果参数大小颠倒时,该函数会自动检测到参数的大小,并默认从小到大的顺序截取(如,第二个参数为负数时,自动转化为0,再调整参数的大小;);
d.不写参数或参数为负时默认从第一个字符开始截取到末尾(即整个字符串);
9.str.slice(i,j)与上面方法类似,但是不会自动检测参数大小,负数从后向前找(最后一个为-1)
………………………………………………………………………………………………………………………………………………….
slice和subtring函数的相同与不同
<script>
var stmp = "rcinn.cn";
//使用一个参数
alert(stmp.slice(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn"
alert(stmp.substring(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn"
//使用两个参数
alert(stmp.slice(1,5))//从第2个字符开始,到第5个字符;返回"cinn"
alert(stmp.substring(1,5));//从第2个字符开始,到第5个字符;返回"cinn"
//如果只用一个参数并且为0的话,那么返回整个参数
alert(stmp.slice(0));//返回整个字符串
alert(stmp.substring(0));//返回整个字符串
//那如何只反回第一个字符呢,可以用其它的函数,那如果一定要用这两个方法的话就指定第一个参数为0,第二个参数为1,看下面的例子
alert(stmp.slice(0,1));//返回"r"
alert(stmp.substring(0,1));//返回"r"
//在上面的例子中我们可以看出slice()和substring()的用法是相同的,返回的值也是一样的,但当参数为负数时,他们的返回值却不一样,看下面的例子
alert(stmp.slice(2,-5));//返回"i"
alert(stmp.substring(2,-5));//返回"rc"
//从上面两个例子可以看出slice(2,-5)实际上是slice(2,3),检测到末尾为-5后,从最后一位(-1)开始从左往右算,数到负5时正确顺序为正3;而substring(2,-5)实际上是substring(2,0),负数转换为0,swubstring总是把最小的数作为起始位置。
alert(stmp.substring(2,-1));//返回“rc”
alert(stmp.slice(2,-7));//返回空,转化为正为slice(2,1),但由于slice没有自动检测参数大小的功能,所以只能返回空</script>
点击展开和收缩例子:点击收缩按钮,把一段文字收缩并+’……’,按钮变成展开;点击展开按钮,把文字还原,并把按钮文字变成收缩
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>古诗</title><style>p{width:200px;}</style></head>
<body>
<button>展开</button>
<p>白日依山尽,黄河入海流。欲穷千里目,更上一层楼</p>
<script>
var oBtn=document.getElementsByTagName("button")[0];
var oP=document.getElementsByTagName("p")[0];
var judge=true;
var str1=oP.innerHTML;
oBtn.οnclick=function(){
var str=oP.innerHTML;
if(judge){
oP.innerHTML=str.substring(0,11)+"...";
judge=false;
}else{
oP.innerHTML=str1;
judge=true;
}
}</script></body>
10.str.toUpperCase()把内容转换为大写
11.str.toLowerCase()把内容转换为小写
12.str.split()字符串转为数组:
a.str.split();不传任何参数,将字符串整体作为数组的第一项
b.alert(str1.split(''));传入一个空字符串,把这个字符串按每个字符分割成一个新数组
c.var str2='string1,string2,string3';alert(str2.split(','));像这种,按照字符串中的分隔符将字符串分隔为一个数组(注意,每个分隔符的左右都会生成一个数组项,所以最左边分隔符左边和最右边分隔符右边会产生空的数组项。这一点需要注意,可能会影响后续的某些操作)
:设置几个颜色,并做两个input一个输入框输入文字,一个按钮点击后在页面上生成背景颜色不同的文字
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#div1{width:500px; height:200px; padding:30px; border:10px #333 solid; color:#fff;}</style></head>
<body><div id="div1"></div><input type="text" placeholder='区分颜色的部分请用英文逗号隔开' /><input type="button" value="按钮" /><script>
var oDiv=document.getElementById("div1");
var aInput=document.getElementsByTagName("input");
var arr=['black','red','pink','yellow'];
aInput[1].οnclick=function(){
var str=aInput[0].value;
for(var i=0;i<str.split(",").length;i++){
oDiv.innerHTML+='<span style="background-color:'+arr[i%4]+'">'+str.split(",")[i]+'</span>';
}
}</script></body>