Js的字符串操作
2021-07-04发布
|

这篇文章通过一些实例介绍下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 的开始位置到结尾的字串。

返回值

一个新的字符串,包含从 stringObjectstart(包括 start 所指的字符) 处开始的 length 个字符。如果没有指定 length,那么返回的字符串包含从 startstringObject 的结尾的字符。

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 中的 $ 字符具有特定的含义。如下表所示,它说明从模式匹配得到的字符串将用于替换。

字符替换文本
$1、$2、…、$99与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
$&与 regexp 相匹配的子串。
$`位于匹配子串左侧的文本。
$’位于匹配子串右侧的文本。
$$替换成$本身

如果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() 对大小写敏感,要忽略大小写请用正则表达式匹配

语法

stringObject.search(string|regexp)

参数

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

返回值

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

------------ END ------------