JS-字符串

JS笔记

---

字符串声明

1. 通过new运算符去声明字符串
    var str1 = new String(100); alert(str1 + 20);//10020 alert(typeof str1);//object
2. 省略new声明字符串
    var str12= String(100); alert(str2 + 20);//10020 alert(typeof str2);//string
3. 字符串常量赋值
   var str3 = "hello"; alert(str3);//hello alert(typeof str3);//string
   【注】字符串是只读，一旦被声明就不能被修改；在JS中，字符串既是基本类型，又是复合数据类型

---

属性

1. 字符串.length，访问字符串中字符的个数【注】中文：utf-8（三个字符表示一个汉字），gbk（两个字符表示一个汉字），在计数的时候都是当成一个汉字计数

var str = "hello北京";
alert(str.length);//7

2. 字符串.charAt(下标);，访问字符串中单个字符，下标从0开始

var str = "hello北京";
alert(str.charAt(4));//o,访问此元素也可以写成：alert(str[4]);

---

字符串遍历

var str = "hello北京";
for(var i = 0;i < str.length;i++){
	document.write(str[i] + "<br/>);
}

---

字符串方法

一、了解。在document.write()中使用，用特殊样式输出字符串
 big() 用大号字体显示字符串
 blink() 显示闪动字符串
 bold() 使用粗体显示字符串
 fixed() 以打印机文本显示字符串
 strike() 使用删除线来显示字符串
 fontcolor() 使用指定颜色来显示字符串
 fontsize() 使用指定尺寸来显示字符串
 link() 将字符串显示为链接
 sub() 把字符串显示为下标
 sup() 把字符串显示为上标
二、重点

1. charCodeAt()
   格式：字符串.charCodeAt(下标)
   功能：访问字符串中对应下标字符的ASCII码值

var str = "hello";
alert(str.charCodeAt(1));//101

2. String.fromCharCode()
   格式：String.fromCharCode(码值1,码值2,…)
   功能：将传入的ASCII码值转成对应的字符串
   返回值：组成的字符串

var str = String.fromCharCode(97,98,99,100);
alert(str);//abcd

---

字符串查找

1. indexOf()
   格式：supStr.indexOf(subStr,start);
   参数：subStr指查找的字符串；start从哪个下标开始查找，如果不传入，默认从0开始
   功能：在supStr中查找subStr第一次出现的位置，从start这个位置开始查找
   返回值：-1，说明没有查找到

var supStr = "abcabcabc";
var subStr = "abc";
var index = supStr.indexOf(subStr);
alert(index);//0

var supStr = "abcabcabc";
var subStr = "abc";
var index = supStr.indexOf(subStr,1);
alert(index);//3

2. lastIndexOf()
   格式：supStr.lastIndexOf(subStr);
   参数：第二个参数是开始查找的位置，查找的下标从右往左数
   功能：在subStr中查找subStr最后一次出现的位置
   返回值：-1 没有查到

var supStr = "abcabcabc";
var subStr = "abc";
var index = supStr.lastindexOf(subStr);
alert(index);//6

3. search()
   格式：supStr.search(subStr);
   参数：字符串/正则表达式（修饰符:i忽略大小写；g全局匹配）
   功能：在supStr中查找subStr第一次出现的位置
   返回值：-1，没有查找到

var supStr = "abcabcabc";
var subStr = "abc";
var index = supStr.search(subStr);
alert(index);//0

var supStr = "Abcabcabc";
var subStr = /abc/i;
var index = supStr.search(subStr);
alert(index);//0

---

字符串提取

1. substring
   格式：字符串.substring(start,end);
   功能：将字符串中[start,end)这部分字符串提取出来，生成新的字符串
   返回值：最新生成的字符串

var str = "hello";
var newStr = str.substring(1,4);
alert(newStr);//ell
alert(str);hello 

2. substr
   格式：字符串.substr(start,length);
   返回值：新生成的字符串

var str = "hello";
var newStr = str.substr(1,3);
alert(newStr);//ell
alert(str);//hello

3. slice(数组)
   格式：字符串.slice(start,end);

var str = "hello";
var newStr = str.slice(1,4);
alert(newStr);//ell
alert(str);//hello

4. replace()
   格式：supStr.replace(oldStr,newStr);
   参数：第一个参数传入的字符串只能替换一次（解决：第一个参数改为正则）
   功能：用newStr将oldStr替换掉，生成新的字符串
   返回值：替换成的新字符串

var str = "how are you";
var newStr = str.replace("are","old are");
alert(newStr);//how old are you 
alert(str);//how are you 

var str = "how are are are you";
var newStr = str.replace(/are/g,"old are");//全局匹配
alert(newStr);//how old are old are old are you 
alert(str);//how are are are you 

5. split()字符串分割
   格式：字符串.split(分割符,length)
   参数：第一个参数，用这个分割符对原字符串进行分割；第二个参数，控制返回的数组元素的个数，一般不用
   功能：用分割符对原有字符串分割
   返回值：数组
   【注】相邻的两个分割符，会产生空字符串；分割符是空字符串""，直接将每一个字符，单独分割成子串，放在数组中返回

var str = "how are you";
var arr = str.split(" ");
alert(arr);//how,are,you
//var arr = str.split(" ",2);
//alert(arr);//how,are
alert(str);//how are you

var str = "how are you";
var arr = str.split("");
alert(arr);//h,o,w, ,a,r,e, ,y,o,u

---

1. toLowerCase() 转成全小写
2. toUpperCase() 转成全大写

var arr = "helloWORLD";
alert(toLowerCase(arr));//helloworld
alert(toUppercase(arr));//HELLOWORLD

---

1. concat() 字符串拼接

var str = "hello";
var newStr = str.concat("world",100);
//var newStr = str + "world" + 100;
alert(newStr);//helloworld100

---

验证码

//n位纯数字验证码，每一个数组范围0-9，parseInt(Math.random()*10);
function numTestCode(n){
	var arr = [];//存储生成的数字
	for(var i = 0;i < n;i++){
		var num = parseInt(Math.random()*10);
		arr.push(num);
	}
	return arr.join("");
}
alert(numTestCode(6));

//n位数组+字母组成的验证码，0-9，a-z(97-122),A-Z(65-90)
function testCode(n){
	var arr = [];
	for(var i = 0;i < n;i++){
		var num = parseInt(Math.random()*123);
		if(num >= 0 && num <= 9){
			arr.push(num);
		}else if(num >= 97 && num <= 122 || num >= 65 && num <=90){
			arr.push(String.fromCharCode(num));
		}else{
			i--;
		}
	}
	return arr.join("");
}
alert(testCode(6));

获取验证码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="testcode.js"></script>
    <script>
      //事情驱动函数
      function btnClick() {
        var oDiv = document.getElementById("div1");
        oDiv.innerHTML = testCode(6);
      }
    </script>
  </head>
  <body>
    <div id="div1">000000</div>
    <button onclick="btnClick();">获取验证码</button>
  </body>
</html>

---

敏感词过滤

//表单元素获取其内容，通过.value的属性；双标签节点，通过innerHTML获取标签间内容
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
    	#msg{width:400px;height:400px;border:1px solid black}
    </style>
    <script>
    //敏感词都过滤（正则）；将敏感词替换成*（replace）
    	var arr = [/nm/ig,/cao/ig];
    	function btnClick(){
    		var oTxt = document.getElementById("txt");
    		var oMsg = document.getElementById("msg");

			var oValue = oTxt.value;
			for(var i = 0;i < arr.length;i++){
				oValue = oValue.replace(arr[i],"*");//替换掉原来的
			}
			
    		oMsg.innerHTML = oValue;//将提交的内容赋值给div的innerHTML
    		oTxt.value = '';//清除
    	}
    </script>
  </head>
  <body>
    <textarea name="" id="txt" cols="30" rows="30"></textarea>
    <button onclick='btnClick();'>Submit</button>
    <div id='msg'></div>
  </body>
</html>

---

表单验证

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单验证</title>
    <style>
      #div1 {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        border: 1px solid black;
        text-align: center;
        padding: 50px;
        margin: 100px auto;
      }
      #div1 input {
        width: 200px;
        height: 30px;
        font-size: 18px;
        margin-top: 10px;
      }
      #div1 span {
        font-size: 14px;
        color: red;
      }
    </style>
    <script>
        function func(){
            var oUsername = document.getElementById("username");
            var oUsernameSpan = document.getElementById("username_span");

            //1.拿到输入框的内容
            var oValue = oUsername.value;

            //2.判断
            if(oValue.length < 6 || oValue.length > 18){//用户名长度是否符合要求
                oUsernameSpan.innerHTML = "!长度应为6-18字符";
            }else if(!isABC(oValue[0])){//首字符是否是字母
                oUsernameSpan.innerHTML = "!必须以英文字母开头";
            }else{//是否由数字、字母、下划线组成
                var isYes = true;//假设符合要求
                for(var i = 0;i < oValue.length;i++){
                    if(!isDEF(oValue[i])){
                        isYes = false;
                        break;
                    }
                }
                if(isYes){
                    oUsernameSpan.innerHTML = "√恭喜，可以注册";
                }else{
                    oUsernameSpan.innerHTML = "！必须由字母、数字、下划线组成";
                }
            }
        }

        //判断单个字符是否是字母
	    function isABC(charStr) {
		    if ((charStr >= "a" && charStr <= "z") || (charStr >= "A" && charStr <= "Z")) {
		        return true;
		    } else {
		        return false;
		    }
	    }

        //判断单个字符是否有数字字母下划线符号
        function isDEF(charStr) {
        	if (
            	(charStr >= "a" && charStr <= "z") ||
            	(charStr >= "A" && charStr <= "Z") ||
            	(charStr >= "0" && charStr <= "9") ||
            	charStr == "_"
        	) {
            	return true;
        	} else {
            	return false;
        	}
        }
    </script>
  </head>
  <body>
    <div id="div1">
      <input id="username" type="text" placeholder="请输入用户名" onblur="func();"/>
      <span id="username_span">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
      <input type="text" placeholder="请输入密码" />
    </div>
  </body>
</html>

---

字符串练习

/* 
	将字符串str = “When I was young, I love a girl in neighbor class.”中,
	从young提取到girl生成新字符串。但是不许数
*/
      var str = "When I was young, I love a girl in neighbor class.";
      var start = str.indexOf("young");
      var end = str.indexOf("girl") + "girl".length;
      var newStr = str.substring(start, end);
      alert(newStr); //young, I love a girl

/* 
	将字符中单词用空格隔开
    已知传入的字符串中只有字母,每个单词的首字母大写，请将每个单词用空格隔开，只保留一个单词的首字母大写
    传入:”HelloMyWorld”
    返回:”Hello my world”
    【思路】1.字符串转成数组 split("")  2.数组转成字符串 join("")
*/
	function wordOfStr(str) {
	  var arr = str.split("");
	  for (var i = 1; i < arr.length; i++) {
	    //判断
	    if (arr[i] >= "A" && arr[i] <= "Z") {
	      //1.将大写字符转成小写    2.插入一个空格
	      arr[i] = arr[i].toLowerCase();
	      arr.splice(i, 0, " ");
	    }
	  }
	  //alert(arr);//H,e,l,l,o, ,m,y, ,w,o,r,l,d
	  return arr.join("");
	}
	var str = wordOfStr("HelloMyWorld");
	alert(str); //Hello my world

/* 
	将字符串按照单词进行逆序，空格作为划分单词的唯一条件
    传入:”Welome to Beijing”改为 “Beijing to Welcome”
*/
	function reverseStr(str) {
	  var arr = str.split(" ");
	  arr.reverse();
	  return arr.join(" ");
	}
	alert(reverseStr("Welome to Beijing")); //Beijing to Welome

/* 对称数组
	传入一个数组，元素类型与个数皆未知，返回新数组，由原数组的元素正序反序拼接而成。
    传入    [“One”, “Two”,”Three”] 
    返回    [“One”, “Two”, “Three”,”Three”,”Two”, “One”]
*/
	function symmetryArr(arr) {
	  var newArr = arr.concat();
	  for (var i = arr.length - 1; i >= 0; i--) {
	    newArr.push(arr[i]);
	  }
	  return newArr;
	}
	alert(symmetryArr(["one", "two", "three"])); //one,two,three,three,two,one

/* 
	已知一个字符串对象中,英语单词用各种非字母字符分割，统计单词个数
	传入:”Yes, she*is%my@love.”;
	返回 5
	【规律】当前面一个字符是字母，后面一个字符是非字母的时候，这就是一个单词
*/
	function countOfWord(str) {
	  var count = 0;
	  for (var i = 0; i < str.length - 1; i++) {
	    if (isABC(str[i]) && !isABC(str[i + 1])) {
	      count++;
	    }
	  }
	  return count;
	}
	//判断单个字符是否是字母
	function isABC(charStr) {
		if ((charStr >= "a" && charStr <= "z") || (charStr >= "A" && charStr <= "Z")) {
		  return true;
		} else {
		  return false;
		}
	}
	alert(countOfWord("Yes, she*is%my@love.")); //5

/* 
	实现函数，查找子串出现的次数，返回字符串str中出现substring的次数
	传入:”abcabcabc”, “abc”
	返回:3
*/
      function countOfStr(supStr, subStr) {
        var arr = supStr.split(subStr);
        return arr.length - 1;
      }
      alert(countOfStr("abcabcabc", "abc")); //3

/* 
	已知邮箱的用户名只能由数字字母下划线组成，域名为@1000phone.com,
	判断一个字符串是否是该邮箱，是返回true，不是返回false。
		mail@1000phone.com   是
        $mail@1000phone.com  不是
        mail@1000phone.comp  不是
*/
    function isEmail(email) {
      //1.查找@符号的位置
      var index = email.indexOf("@");
      if (index == -1) {
        	return false;
      } else {
        	var endStr = email.substring(index);
        	if (endStr != "@1000phone.com") {
          	return false;
      	} else {
          	//判断用户名是否符号数字字母下划线
          	var username = email.substring(0, index);
          	var isYes = true; //假设都符合
          	for (var i = 0; i < username.length; i++) {
            		if (!isDEF(username[i])) {
              		isYes = false;
              		break;
            		}
          	}
          return isYes;
        }
      }
    }
    //判断单个字符是否有数字字母下划线符号
    function isDEF(charStr) {
      if (
        (charStr >= "a" && charStr <= "z") ||
        (charStr >= "A" && charStr <= "Z") ||
        (charStr >= "0" && charStr <= "9") ||
        charStr == "_"
      ) {
        return true;
      } else {
        return false;
      }
    }
    alert(isEmail("mail@1000phone.com")); //true
    alert(isEmail("$mail@1000phone.com")); //false
    alert(isEmail("mail@1000phone.comp")); //false