文章目录
String 字符串对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String
一、String 字符串替换
1、replace 函数替换字符串
replace 函数 的 作用是 字符串替换 ;
replace 函数原型 : 将 匹配的 pattern 模式 的 子字符串 替换为 replacement ;
replace(pattern, replacement)
- pattern 参数 : 是 字符串 或 正则表达式 , 传入的对象必须有 Symbol.replace 函数 ;
- replacement 参数 : 被替换的字符串 ;
- 返回值是 已经替换好 的 新的字符串 , 原字符串不变 ;
如果 pattern 参数是字符串 , 则默认只替换一次 , 将第一个匹配的字符串进行替换 , 后面就不再进行替换 ;
下面的字符串中有 2 哥 l 字符 , 使用 replace 函数进行替换 , 只替换了第一个 l 字符 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 给定一个字符串
var str = 'Hello';
// 字符串替换
console.log(str.replace('l', 'A'));
</script>
</head>
<body>
</body>
</html>
执行结果 :
2、使用 replace 函数替换所有匹配字符串
使用 indexOf 函数 , 可以获取 子字符串 在 当前字符串 的索引位置 , 如果 查询的字符串中没有 对应的 子字符串 , 则返回 -1 ;
在下面的代码中 , 使用 indexOf 获取的索引值作为循环条件 , 如果索引值不为 -1 则执行循环体内容 , 在循环体内进行 replace 函数替换操作 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 给定一个字符串
var str = 'Hello';
// 字符串替换
//console.log(str.replace('l', 'A'));
// 替换所有符合要求的字符串
while (str.indexOf('l') != -1) {
str = str.replace('l', 'A');
}
// 打印最终的字符串替换结果
console.log(str);
</script>
</head>
<body>
</body>
</html>
执行结果 :
3、replaceAll 函数替换字符串
replaceAll 函数 替换 字符串中的 子字符串 , 可以一次性替换所有符合要求的字符串 ;
函数原型如下 :
replaceAll(pattern, replacement)
- pattern 参数 : 是 字符串 或 正则表达式 , 传入的对象必须有 Symbol.replace 函数 ;
- replacement 参数 : 被替换的字符串 ;
- 返回值是 已经替换好 的 新的字符串 , 原字符串不变 ;
参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 给定一个字符串
var str = 'Hello';
// 字符串替换
console.log(str.replaceAll('l', 'A'));
</script>
</head>
<body>
</body>
</html>
执行结果 :
二、String 字符串转数组
1、split 函数切割字符串
split 函数 可以 根据 字符串中的 子字符串 或 正则表达式 作为切割符号 , 将字符串切割成若干个子字符串组成的数组 ;
split 函数原型 :
split(separator)
split(separator, limit)
- separator 参数 : 作为分割依据的字符串 , 如果省略该参数 , 或传入 undefined 值 , 则返回一个数组 , 数组中只有一个元素 , 就是原字符串 ;
- limit 参数 : 限制字符串切割的数量 , 可省略 , 原来切割 5 个子字符串 , 设置 limit 为 3 , 则切割完第二个元素后 , 将后面所有的内容都划分到第三个元素中 ;
参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/split
2、代码示例 - 切割字符串
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 给定一个字符串
var str = 'Blue,Red,Purple';
// 字符串切割
console.log(str.split(','));
</script>
</head>
<body>
</body>
</html>
执行结果 :
