梦入琼楼寒有月，行过石树冻无烟

JavaScript 字符串方法

2022-04-21

字符串

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
  var leigin = "Hello";
  document.getElementById('data').innerHTML = leigin;
</script>
</body>
</html>

字符串方法

字符串长度 (Length)
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var data = "ASDSADSADQWEQW";
document.getElementById('demo').innerHTML = data.length;
</script>
</body>
</html>
字符串首次出现位置 (indexOf)
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
var data = "DSADKJQIWJEIWQE NI1" ;
var inof = data.indexOf("NI1");
document.getElementById("data").innerHTML = inof; 
</script>
</body>
</html>
字符串最后出现位置 (lastIndexOf)
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
var data = "DSADKJQIWJEIWQE NI1DDASJDISAIADIASD NI1" ;
var inof = data.lastIndexOf("NI1");
document.getElementById("data").innerHTML = inof; 
</script>
</body>
</html>
数据提取 (slice)
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
var dat = "one, two, three, four";
var det = dat.slice(5,9);
document.getElementById('data').innerHTML = det;
</script>
</body>
</html>

切片

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
var dat = "one, two, three, four";
var det = dat.slice(5);
document.getElementById('data').innerHTML = det;
</script>
</body>
</html>
文字替换 (replace)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<button onclick="functio()">开始</button>
<p id="data">我很好</p>
<script>
function functio() {
    var data = document.getElementById('data').innerHTML;
    var repl = data.replace("我很好","我不好")
    document.getElementById('data').innerHTML = repl;
}
</script>
</body>
</html>

大小写通用 (/i)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<button onclick="functio()">开始</button>
<p id="data">Google</p>
<script>
function functio() {
    var data = document.getElementById('data').innerHTML;
    var repl = data.replace(/GOOGLE/i,"Go")
    document.getElementById('data').innerHTML = repl;
}
</script>
</body>
</html>

多个替换 (/g)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<button onclick="functio()">开始</button>
<p id="data">Google,Google</p>
<script>
function functio() {
    var data = document.getElementById('data').innerHTML;
    var repl = data.replace(/Google/g,"Go")
    document.getElementById('data').innerHTML = repl;
}
</script>
</body>
</html>

正则表达

ID DA FA
/i 大小写敏感
/g 多个替换
大小写字母转换 (toUpperCase / toLowerCase)

转换大写 (toUpperCase)

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>				
<html>
<body>
<button onclick="dat()">开始</button>
<p id="data">Hello World!</p>
<script>
function dat() {
  var data = document.getElementById('data').innerHTML;
  document.getElementById("data").innerHTML = data.toUpperCase();
}
</script>
</body>
</html>

转换小写 (toLowerCase)

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>				
<html>
<body>
<button onclick="dat()">开始</button>
<p id="data">Hello World!</p>
<script>
function dat() {
  var data = document.getElementById('data').innerHTML;
  document.getElementById("data").innerHTML = data.toLowerCase();
}
</script>
</body>
</html>
字符串连接 (concat)
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
var data_one = "World";
var data_two = "Hello"
data_three = data_one.concat(" ",data_two);
document.getElementById('data').innerHTML = data_three;
</script>
</body>
</html>
提取字符串 (charAt)
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
var dataOne = "ABCDEFD"
document.getElementById('data').innerHTML = dataOne.charAt(1);
</script>
</body>
</html>
ID DA FA
length 字符串长度 位置
indexOf 某个字符串首次出现位置
lastIndexOf 某个字符串最后出现位置
slicen(x,y) 提取某个字符串位置 提取
slice(n) 切片
replace() 替换字符串为n 替换
toUpperCase 转换大写 转换
toLowerCase 转换小写
concat() 字符串连接 连接
charAt 提取字符串 提取
⬅️ Go back