JavaScript基础学习(6)

发表于 | 分类于 ， ， | 阅读次数:

字符串、查找高亮显示

字符串获取类、封装检测数字的方法

1
2
3
4
5
var str = new String;
str.length; //字符串长度
str.charAt(); //获取字符串中的字符
str.charCodeAt();  //返回对应字符的编码 0～9 48～57 a~z 97~122 A~Z 65~90
String.fromCharCode(); //根据字符编码返回字符

判断是否是数字
isNaN() 无法判断空格

1
2
3
4
5
6
7
8
function detectNum(str){
  var n = 0;
  for(var i = 0; i < str.length; i++){
    n = str.charCodeAt(i);
    if(n < 48 || n > 57) return false;
  }
  return true;
}

formCharCode返回字符串实例、字符串加密

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<input type="text">
<input type="button" value="加密">
<div id="div1">加密。。。</div>
<script>
var aInp = document.getElementsByTagName('input');
var oDiv = document.getElementById('div1');

aInp[1].onclick = function(){
  var str = aInp[0].value;
  var str1 = '';
  for(var i = 0; i < str.length; i++){
    str1 += String.fromCharCode(str.charCodeAt(i) - 1000) + ':';
  }
  oDiv.innerHTML = str1;
};
</script>

indexOf、lastIndexOf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function judgeI(str){
  for(var i = 0; i < str.length; i++){
    if(str.charAt(i) === 'i'){
      alert(i);
    }
  }
}

var str = 'string string string';
str.indexOf('i');
str.indexOf('i', 7);  //第二个参数表示从第几个字符开始找, 如果为负数或超出字符串长度则默认为0
str.indexOf('X'); // -1 表示没有找到

function judgeLocation(str, target){
  //for(;str.indexOf(target, i) != -1;){
  //  alert(str.indexOf(target, i));
  //  i = str.indexOf(target, i) + s.length;
  //}
  while(str.indexOf(target, i) != -1){
    alert(str.indexOf(target, i));
    i = str.indexOf(target, i) + s.length;
  }
}

比较类、截取类、substring应用实例
字符串比较大小：比较第一个字符的编码大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div>
  <p>这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。</p>
  <span><<收起</span>
</div>
<script>
  window.onload = function(){
    var oP = document.getElementsByTagName('p')[0];
    var oSpan = document.getElementsByTagName('span')[0];
    var str = oP.innerHTML;
    var onOff = true;

    oSpan.onclick = function () {
      if(onOff){
        oP.innerHTML = str.substring(0, 6);
        oSpan.innerHTML = '>>展开';
      }else{
        oP.innerHTML = str;
        oSpan.innerHTML = '<<收起';
      }
      onOff = !onOff;
    }
  }
</script>

【示例：点击查看】

大小写转换、split分割字符串
toUpperCase() //转成大写
toLowerCase() //转成小写
用来做判断

string.split(‘’) //字符串拆分成数组
array.join(‘’) //数组连接成字符串
split彩色文字效果实例

高亮显示关键字实例、替换搜索关键字实例

1
2
3
4
5
6
7
8
9
10
11
12
<input type="text">
<input type="button" value="按钮">
<p>这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。</p>
<script>
 var aInp = document.getElementsByTagName('input');
 var oP = document.getElementsByTagName('p')[0];
 aInp[1].onclick = function(){
   var str = aInp[0].value;
   if(!str) return;
   oP.innerHTML = oP.innerHTML.split(str).join('<span>' + str + '</span>');
 }
</script>

【示例：点击查看】

字符串方法总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var str = 'String string';
str.charAt(1);  //"t"
str.charCodeAt(0);  //83
String.fromCharCode(83);  //"S"

str.indexOf('r', 3);  //9
str.lastIndexOf('i'); //10

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

str.substring(0, 4);  //"Stri"
str.slice(-3);  //"ing"

str.toUpperCase();  //STRING STRING
str.toLowerCase();  //string string

str.split('i', 2);  //["Str", "ng str"]

var arr = ['s','t','r','i','n','g'];
str.join(''); //"string"

练习：
1.查找、替换、删除
【示例：点击查看】
2.文字搬运工
【示例：点击查看】