length、charAt、fromCharCode

length：获取字符串长度

alert('yangwei杨'.length);  //  8
alert('yangwei 杨'.length);  //  9
alert('yangwei 杨 '.length);  //  10alert('yangwei 杨'[3]); // g ；IE678不兼容 undefined

charAt：获取字符串索引位子的字符

alert('yangwei杨'.charAt(3)); // g
alert('yangwei杨'.charAt(32325)); // '' (空)
alert('yangwei杨'.charAt('0')); // y

charCodeAt：获取字符串索引位子的字符的ASCII码

var str1 = '012345';   // 0-9 ==> 48-57
var str2 = 'abczABCZ';     // a-z ==> 97-122;A-Z ==> 65-90
// alert(str1.charCodeAt()); // 48 (ascii码)
// alert(str1.charCodeAt(0)); // 48 (ascii码)
// alert(str1.charCodeAt(252)); // 找不到 NaN
alert(str2.charCodeAt(3)); // 122

fromCharCode：ascii码转字符串

var num = 48;
// alert( String.fromCharCode(num) );  // 0
alert( String.fromCharCode(48, '97') ); // 0a

小案例：验证QQ号

<input type="text" placeholder="请输入QQ号" id="txt" maxlength="10">
<input type="button" id="btn" value="验证">

// 0-9 <==> 48-57
var oTxt = document.getElementById('txt');
var oBtn = document.getElementById('btn');oBtn.onclick = function(){var val = oTxt.value;if(!val){alert('请输入QQ号');oTxt.focus();}// QQ号第一位不能为0if(val.charCodeAt() == 48){alert('验证失败！第1个位置不能为0！');return;}// QQ号长度限制（5~10）var len = val.length;if(len<5 || len>10){alert('验证失败！QQ号长度错误！');return;}// QQ号只能是字数组成for(var i=0;i<len;i++){var valCode = val.charCodeAt(i);if(valCode<48 || valCode>57){alert('验证失败！第'+(i+1)+'个位置不是数字！');oTxt.focus();// break;return;}}alert('验证成功！');return;
}

字符串拼接、查询索引

concat：连接两个或多个字符串

var str1 = '我很帅吗？';
var str2 = '很帅';
alert( str1.concat(str2) ); // 我很帅吗？很帅
alert( str1.concat(str2, str2) ); // 我很帅吗？很帅很帅

indexOf：返回索引，找不到返回-1

alert( str1.indexOf('帅') ); // 2
alert( str1.indexOf('很帅') ); // 1
alert( str1.indexOf('afdas') ); // -1// 带参数表示从参数指定的位置往后找，找到就返回索引，找不到就返回-1
alert( str1.indexOf('帅', 3) ); // 2

查询单个的原理

String.prototype.xxxIndexOf = function(key){var len = this.length;var index = -1;for(var i=0; i<len; i++){if(this.charAt(i) == key){index = i;break;}}return index;
}
alert( str1.xxxIndexOf('帅') ); // 2

lastIndexOf：从后往前找，indexOf：从前往后找

str1 = 'fasfsafa'
alert( str1.lastIndexOf('f') );// 6

join

var arr = [0, 1, 'a'];
var s1 = arr.join();
console.log(s1); // 0,1,a
var s2 = arr.join('$$');
console.log(s2); // 0$$1$$a

字符串截取

slice(startIndex, endIndex);——包含startIndex，不包含endIndex ==> [startIndex, endIndex)
substring(startIndex, endIndex);——包含startIndex，不包含endIndex ==> [startIndex, endIndex)

slice

1、若 startIndex 是负数，则 startIndex = length + startIndex
2、若 endIndex 是负数，则 endIndex = length + endIndex
3、若参数个数为1并且是负数，绝对值>length，则参数就是0

var str = '0123456789';console.log( str.slice() ); // 0123456789
console.log( str.slice(0) ); // 0123456789
console.log( str.slice(2) ); // 23456789
console.log( str.slice(10) ); // '' 空
console.log( str.slice(-1) ); // 9
console.log( str.slice(-11) ); // 0123456789
console.log( str.slice(2, 5) ); // 234
console.log( str.slice(-3, 2) ); // '' 空

substring

和slice基础部分一样
1、若 startIndex 或 endIndex 为负数，则 startIndex = 0 或 endIndex = 0
2、若 startIndex 或 endIndex 大于length，则 startIndex = length 或 endIndex = length
3、若 endIndex < start，则它们会自动交换

var str = '0123456789';console.log( str.substring() ); // 0123456789
console.log( str.substring(0) ); // 0123456789
console.log( str.substring(2) ); // 23456789
console.log( str.substring(10) ); // '' 空
console.log( str.substring(-1) ); // 0123456789
console.log( str.substring(-4, -3) ); // '' 空
console.log( str.substring(2, 5) ); // 234
console.log( str.substring(-3, 2) ); // 01
console.log( str.substring(4, -1) ); // 1234

substring原理

String.prototype.xxxSubstring = function(start, end){var len = this.length;var s = '';if (start < 0) {start = 0};if (end < 0) {end = 0;}if (start > len) {start = len;}if (end > len) {end = len;}// 交换var min = Math.min(start, end);var max = Math.max(start, end);for(var i=min; i<max; i++){s = s.concat(this.charAt(i))}return s;
}
console.log( str.xxxSubstring(4, -1) )

案例-查找关键字高亮显示

*{padding: 0;margin: 0;}
#box{width: 400px;height: auto;margin: 50px auto;border: 1px solid grey;text-indent: 24px;}
p{text-align: center;}
#txt{height: 40px}
#btn{height: 40px;width: 80px}

<div id="box">我喜欢借月色沉淀心情，如水月色，可饮。推开窗户，任月色静静流泻在肌肤上，轻盈飘逸的韵致，清新蕴涵的情调自然流淌在心际。月华如练，心情在月色中变的清朗而柔软，恍然间生命中的种种感动和美丽灵动浮若。
</div>
<p><input type="text" id="txt" placeholder="请输入文字..."><input type="button" id="btn" value="查找">
</p>

window.onload = function(){var oBox = document.getElementById('box');var oTxt = document.getElementById('txt');var oBtn = document.getElementById('btn');var content = oBox.innerHTML;// oBtn.onclick = function(){//    oBox.highlight(content, oTxt.value);// }// 输入框获取焦点的时候oTxt.onfocus = function(){document.onkeyup = function(){oBox.highlight(content, oTxt.value);}}// 封装search highlightObject.prototype.highlight = function(content, keyword){if(!keyword) {this.innerHTML = content;}else{var arr = content.split(keyword);this.innerHTML = arr.join('<span style="color:red;background:yellow">'+keyword+'</span>');}}
}

JavaScript基础（四）字符串操作相关推荐

JavaScript中的字符串操作(转）
http://www.cnblogs.com/xuebin/articles/1296837.html 最近编一个javascript的翻译程序,发现无法正确比较两个字符串的相等,上网查了查,发现这篇 ...
JavaScript常用的字符串操作对象方法
文章目录 ==对象方法== ++搜索.索引 `indexOf() ` :搜索首个字符串出现的位置 `lastIndexOf() `:搜索最后出现的字符串位置 `includes() `:搜索判断字符串 ...
JavaScript基础——处理字符串
String对象是迄今为止在JavaScript中最常用的对象.在你定义一个字符串数据类型的变量的任何时候,JavaScript就自定为你创建一个String对象.例如: var myStr = &q ...
[记录] JavaScript 中的字符串操作
字符串原型: 通过修改字符串的原型,可以为所有字符串添加公共方法 String.prototype.startwith = function(text) {return this.indexOf(te ...
go基础：字符串操作
一.简介字符串是在编程中一个非常常见的操作,熟悉语言的自带的字符串操作函数能帮助你写出优雅.高效的代码,所以语言中自带的字符串处理函数,大家应该熟练掌握.go中主要操作字符的包是strings,下面 ...
Python 基础之字符串操作,函数及格式化format
一.字符串的相关操作 1.字符串的拼接 + strvar1 = "我爱你," strvar2 = "亲爱的姑凉" res = strvar1 + strvar2 ...
python入门之字符串处理_Python基础之字符串操作，格式化。
Python字符串现在感觉在日常的使用中不多,但仔细看了书以后一些小技巧还是很方便的,我这里简单的记录下. 插入一个超搞逼格的: .format_map(其实这个是字符串的方法.....) In [8 ...
Python基础知识-字符串操作
字符串常见操作 1.切片 2. 查询(find,index) 3. 大小写转换(upper.lower.swapcase.capitalize和title) 4. 对齐(center,just和zfi ...
010-python基础-数据类型-字符串操作
1.移除空白 1 username.strip() 2.分割 1 names = "alex,jack,rain" 2 names_1 = names.split(",& ...
java——基础数据类型——字符串操作
======================================================================== 获取字符串长度 String st = "b ...

JavaScript基础（四）字符串操作

字符串操作