字符串的api (基础)

一、基础

1.字符串.charAt(index) 根据下标获取字符串的某一个字符

应用： 判断字符串的首字母是否大写

任意给定的一串字母，统计字符串里面的大写字母和小写字母的个数

 

2.字符串.indexOf("") 查询字符在字符串中第一次出现的下标（如果没找到，返回-1） 如果是两个参数，第二个代表从第几个查找

应用： 判断密码中是否含有特殊字符
字符串去重

3.字符串.lastIndexOf("") 查找字符在字符串中最后一次出现的位置

应用： 判断字符串中的某个字符是不是唯一的

从字符串中找出没有重复的字符

4.字符串.substring(start,end) 字符串的截取 （从start开始截取到end 不包括end）（不操作原字符串）

如果 indexStart 等于 indexEnd，substring 返回一个空字符串。

如果省略 indexEnd，substring 提取字符一直到字符串末尾。

如果任一参数小于 0 或为 NaN，则被当作 0。

如果任一参数大于 stringName.length，则被当作 stringName.length。

如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。

5.字符串.slice(start,end) 字符串的截取 （从start开始截取到end 不包括end）(接受一个负的参数 -1代表从最后一个开始)（不操作原符串） str.slice(-3,-1) 倒数第三个不包括倒数第一个

6.字符串.substr(start,length) 从start开始截取长度为length的部分。（如果参数是一个的情况下，是删除几个字符）（不操作原符串）

7.字符串.split(分隔符) 》 字符串翻转（转数组，数组翻找再赋值给字符串）（不操作原符串）

8.字符串.replace(old,newStr) 替换字符 不改变原字符串，返回新字符串，每次只能替换一个

 

二、案例

1. 判断用户名长度是否正确（oninput事件，时刻监听文本框是否发生变化。元素.oninput）

   <input type="text" id="username">
   <span id="info"></span>
   username.oninput = function() {
       if(this.value.length>=6 && this.value.length<=10) {
           info.innerHTML ="用户名长度合法" ;
       } else {
           info.innerHTML ="用户名长度不合法" ;
       }
   }

2. 监测留言板数量（oninput事件，时刻监听文本框是否发生变化。元素.oninput）

   css代码：
       textarea {
           width: 500px;
           height: 200px;
           resize: none;
       }
       em {
           font-size: 22px;
           color: red;
       }
   html代码：
       <textarea name="" id="txt"></textarea>
       <span id="info">剩余字数: <em id="text1">200</em></span>
   js代码：
       txt.oninput = function() {
           text1.innerHTML = 200 - this.value.length ; 
           if (this.value.length >= 200) {
                txt.disabled = 'true';   
           }
       }

3. 检测一个字符串的首字母是大写还是小写

   var  str= "Hdhdhdhdhdhdhddaka";
   if(str.charAt(0)>='A' && str.charAt(0) <= 'Z') {
       console.log("大写");
   } else {
       console.log("不是大写");
   }

4. 计算一个字符串中，大小写的数量

   var str = "lllllfkfLLLLLLLL";
   var uppercase = 0;
   var lowercase = 0;
   for (var i = 0, k = str.length; i < k; i++) {
       if (str.charAt(i) >= 'A' && str.charAt(i) <= 'Z') {
           uppercase++;
       } else {
           lowercase++;
       }
   }
   console.log("大写:" + uppercase + ";小写:" + uppercase);

5. 判断密码中是否含有特殊字符

   var special = "#$%&*";
   var str = "11111jdjdjjdd%^#$%jd&";
   for (var i = 0, k = special.length; i < k; i++) {
       if (str.indexOf(special.charAt(i)) != -1) {
           console.log("有特殊字符");
           break;
       }
   }

6. 判断字符串中的某个字符是不是唯一的

   str = "asdfghds";
   ​
   function onlyChar(str,c) {   
       if(str.indexOf(c) == -1) {
            console.log(c+"是唯一的")
       }else {
           console.log(c+"不是唯一的");
       }
   }
   onlyChar(str,'a')

7. 从字符串中找有有没有重复的字符

   str = "asdfghds";
   function strNoRepeat(str) {
       strTemp = "";
       for (var i = 0, k = str.length; i < k; i++) {
           if (str.indexOf(str.charAt(i)) == str.lastIndexOf(str.charAt(i))) {
               strTemp += str.charAt(i);
           }
       }
       return strTemp;
   }
   ​
   console.log(strNoRepeat(str));

8. 敏感词过滤

   1. 分析

      给button绑定事件
      获取input输入的值
      过滤内容中的敏感词汇，用*代替
      将过滤后input中的值，放入div中。

   2. 代码

      方法一：
      ​
      var special = ['fuck', 'md', 'kao', 'laji'];
      btn.onclick = function () {
          //获取文本框中的值
          var inputVal = txt.value;
          // 过滤敏感词汇
          for (var i = 0; i < special.length; i++) {
              for (var j = 0; j < inputVal.length; j++) {
                   inputVal = inputVal.replace(special[i], '*');
               }
          }
          //将过滤后的值写入div中
          content.innerHTML = inputVal;
      }
      ​
      方法二：（利用正则表达式进行全局匹配）
      var special = ['fuck', 'md', 'kao', 'laji'];
      btn.onclick = function () {
          //获取文本框中的值
          var inputVal = txt.value;
          for (var i = 0; i < special.length; i++) {
               var reg = new RegExp(special[i], "g");   //正则表达式  g代表的是全局匹配
               //循环遍历敏感词
               inputVal = inputVal.replace(reg, '*');
          }
      ​
          content.innerHTML = inputVal;
      }

9. 验证码强度

   1. 分析

      长度为6-16
      全是数字 提示弱
      函数特殊字符（！@#等） 提示强
      否则提示中

   2. 代码

      css代码：
           <input type="text" id="psw"><span id="info"></span>
      html代码：
          span {
                  font-size: 12px;
                  margin-left: 10px;
              }
      js代码： 
      var special = "@#$%^&*";
          //找到页面中的元素，绑定事件
      psw.oninput = function () {
          var pswVal = psw.value;
          if (pswVal.length < 6 || pswVal.length > 16) {
              return info.innerHTML = "密码长度不合法!";
          }
          if (typeof (Number(pswVal)) == 'number' && !isNaN(pswVal)) {
              return info.innerHTML = "密码强度弱!";
          }
          // if(Number(pswVal) == pswVal) {
          // return info.innerHTML = "密码强度弱!"
          // }
          for (var i = 0; i < special.length; i++) {
              if (pswVal.indexOf(special[i]) != -1) {
                  return info.innerHTML = "密码强度强!";
              }   
          }
          return info.innerHTML = "密码强度中";
      }