这篇文章通过一些实例介绍下js中操作字符串的函数。

字符串分割

split()

split() 方法用于把一个字符串分割成字符串数组。

提示： 如果把空字符串 (“”) 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

注意： split() 方法不改变原始字符串。

语法

string.split(separator,limit)

参数

separator: (string|regex) [optional] - 从该参数指定的地方分割字符串。

limit：(string|regex) [optional] - 该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

返回值

Array：一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 string Object 分割成子串创建的。返回的数组中的字串不包括 separator 自身。

例子

var test = '2030/05/20'
var result = test.split('/')
console.log(result) // ["2030", "05", "20"]

split 的第二个参数还可以传入一个正则表达式，例如下面的例子

let test = "《西游记》+《水浒传》+《金瓶梅》"
let result = test.split(/[《》+]+/ig)
console.log(result) //  ["", "西游记", "水浒传", "金瓶梅", ""]
result.shift()
result.pop()
console.log(result) //  ["西游记", "水浒传", "金瓶梅"]

[ ] 中括号在正则中称为字符组(Character class)，[]中括号中的字符是或的关系，即每个字符都会被匹配。很多元字符在字符组内都变成了普通字符” ，像 "?","+","*"这几个一旦放到中括号也变成了普通的字符了。没有[]外面的+号，那么我们会匹配到这样的结果 ["", "西游记", "", "", "水浒传", "", "", "金瓶梅", ""]。[]外面的+号是一个特殊字符，意思是匹配到前面的表达式一次或多次，比如例子中匹配到 》会继续向后匹配符合条件的+、《。

字符串截取

js中字符串截取有几个比较相似的函数。可以说功能非常相近，很容易弄混淆。

substr()

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

语法

stringObject.substr(start,length)

参数

start：(int) [require] - 要抽取的子串的起始下标。如果是负数，那么从 stringObject 尾部位置开始。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。

length：(int) [optional] - 截取长度。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

返回值

一个新的字符串，包含从 stringObject 的 start（包括 start 所指的字符） 处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到 stringObject 的结尾的字符。

substring()

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

substring() 方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。

语法

string.substring(from, to)

参数

from ：(int) [require] - 一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。

to ：(int) [optional] - 一个非负的整数，比要提取的子串的最后一个字符在 string Object 中的位置多 1。
如果省略该参数，那么返回的子串会一直到字符串的结尾。

返回值

一个新的字符串，从 开始 处的字符，但不包括 结束 处的字符。

slice()

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

语法

stringObject.slice(start,end)

参数

start： (int) [require] - 要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。

end：(int) [optional] - 要抽取的字符串片段的结尾下标。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

返回值

一个新的字符串。包括字符串 stringObject 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。

说明

String 对象的方法 slice()、substring() 和 substr() （不建议使用）都可返回字符串的指定部分。slice() 比 substring() 要灵活一些，因为它允许使用负数作为参数。slice() 与 substr() 有所不同，它用两个字符的位置来指定子串，而 substr() 则用字符位置和长度来指定子串。

还要注意的是，String.slice() 与 Array.slice() 相似。

字符串替换

replace()

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

语法

stringObject.replace(regexp/substr,replacement)

参数

regexp/substr：(string|regex) [require] - 规定子字符串或要替换的模式的 RegExp 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。

replacement：(string) [require] - 一个字符串值。规定了替换文本或生成替换文本的函数。它可以是字符串，也可以是函数。如果它是字符串，那么每个匹配都将由字符串替换。但是 replacement 中的 $ 字符具有特定的含义。如下表所示，它说明从模式匹配得到的字符串将用于替换。

如果replacement是函数，每个匹配都调用该函数，它返回的字符串将作为替换文本使用。

返回值

一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

例子

我们先用来个简单的替换

let test = '2030/05/20'
let result = test.replace('/','-')
console.log(result)  // 2030-05/20

我们发现第一个/被替换成-。

如果想全局替换可以将第一个参数换成正则表达式，进行全局匹配。

let test = '2030/05/20'
let result = test.replace(/\//g,'-')
console.log(result)  // 2030-05-20

$ 字符

前面我们提到第二个参数replacement中特殊字符$，接下来看下具体栗子。把一句话中的书用《》括起来。

let str = "清初文艺理论家张竹坡称金瓶梅为第一奇书。"
let result = str.replace(/金瓶梅/, '《$&》')
console.log(result) // 清初文艺理论家张竹坡称《金瓶梅》为第一奇书。

再比如

let str = "水浒传、三国演义、西游记、红楼梦是我国古典长篇小说四大名著"
let result = str.replace(/(红楼梦|西游记|水浒传|金瓶梅|三国演义)/g, '《$&》')
console.log(result) // 《水浒传》、《三国演义》、《西游记》、《红楼梦》是我国古典长篇小说四大名著

有时候 replace 的第一个参数并不是我们定义好的字符串，而是从后端传过来的变量，或是用户输入的数据。这个时候可以用new RegExp() 来匹配变量。

function getKeyword(content, keyword){
  return content.replace(new RegExp(keyword, 'ig'),'<strong>$&</strong>')
}

这个函数的作用是在content 中查找关键词keyword ，并将其套上 strong 标签。i 表示忽略大小写，g 表示全局搜索。

str = "JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。"
keyword = "js,java 编程"
// 将字符串以|分割。
keyword = keyword.replace(/[\s,]+/g, '|')
const result = getKeyword(str, keyword)
console.log(result)
// <strong>Java</strong>Script（简称“<strong>JS</strong>”） 是一种具有函数优先的轻量级，解释型或即时编译型的<strong>编程</strong>语言。

这其实就是搜索关键词高亮的程序，keyword 是用户输入的关键词，str 是被检索的内容。 给 strong标签写上样式可以给关键词加上各种效果。

函数

replacement 作为函数时每个匹配都调用该函数，它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配到的字符串。接下来的参数是与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数。接下来的参数是一个整数，声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。

还是四大名著的例子

let str = "水浒传、三国演义、西游记、红楼梦是我国古典长篇小说四大名著"
result = str.replace(/(水浒传)(.*)(红楼梦)/g,function() {
    console.log(arguments);
    return `『${arguments[0]}』`
});
console.log('result', result) // 『水浒传、三国演义、西游记、红楼梦』是我国古典长篇小说四大名著

arguments 是一个数组，每一项都可用作要替换的文本。

0: "水浒传、三国演义、西游记、红楼梦" -- 正则匹配到的内容。
1: "水浒传"	-- 子表达式的匹配结果。本例中的1，2，3输出的都是子表达式的匹配结果。子表达式可以有 0 个或多个
2: "、三国演义、西游记、"
3: "红楼梦"
4: 0 -- 字符串匹配到的位置
5: "水浒传、三国演义、西游记、红楼梦是我国古典长篇小说四大名著" -- 字符串本身。

字符串检索

开发中经常遇到需要判断一个字符串是否包含另一个字符串、查找指定字符串的位置、查找指定字符串出现的次数等操作。js 提供了几个函数来处理这方面的需求。

indexOf()

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

indexof() 对大小写敏感

语法

stringObject.indexOf(searchvalue,fromindex)

参数

searchvalue ：(string) [require] - 规定需检索的字符串值。

fromindex ：(int) [optional] - 开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

返回值

要检索的字符串在stringObject第一次出现的位置，如果要检索的字符串没有出现，则返回-1

search()

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。

search() 对大小写敏感，要忽略大小写请用正则表达式匹配

语法

stringObject.search(string|regexp)

参数

regexp ：(string|regexp) [require] - 要查找的字符串或者正则表达式。

返回值

与指定查找的字符串或者正则表达式相匹配的 stringObject 对象起始位置，如果要检索的字符串没有出现，则返回-1