目录
1.length（）
返回字符串的长度
<body>
<p id="demo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>
</body>2.charAt()
返回字符串中指定位置（下标）的字符
<body>
<p id="demo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.charAt(0);
</script>
</body>3.Replace()
用一个值替换字符串中指定位置的值
<body>
<p id="demo1">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<button onclick="onclick_test()">点击</button>
</body>
<script>
function onclick_test() {
var str = document.getElementById("demo1").innerHTML;
var txt = str.replace("ABCD","1234");
document.getElementById("demo1").innerHTML = txt;
}
</script>
4.split()
用指定字符分割字符串，并将其转化为数组。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo1">a,b,c,d</p>
<button onclick="onclick_test()">点击</button>
</body>
<script>
function onclick_test() {
var str = 'a,b,c,d'
var txt = str.split(",");
document.getElementById("demo1").innerHTML = txt[0];
}
</script>
</html>5.toUpperCase()
把字符串中的小写字母转换为大写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<button onclick="onclick_test()">试一试</button>
<p id="demo">Hello World!</p>
</body>
<script>
function onclick_test() {
var text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.toUpperCase();
}
</script>
</html>6.toLowerCase()
把字符串中的大写字母转换为小写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<button onclick="onclick_test()">试一试</button>
<p id="demo">Hello World!</p>
</body>
<script>
function onclick_test() {
var text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.toLowerCase();
}
</script>
</html>7.indexOf()
返回指定文本在字符串中出现的位置（下标）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p id="demo">I am Chinese</p>
</body>
<script>
var str = "I am Chinese";
// 空格算一位索引
var pos = str.indexOf("Chinese");
document.getElementById("demo").innerHTML = pos;
</script>
</html>8.Substring()
切割字符串，第一个参数为开始位置，第二个参数为结束位置，第二个参数可以省略。
<body>
<p id="demo">I am Chinese</p>
<script>
var str = "I am Chinese";
var res = str.substring(5, 12);
document.getElementById("demo").innerHTML = res;
</script>
</body>9.slice()
slice()方法的作用也是切割字符串，区别于substring()方法的是前者可以接受负数，而后者不可以。如果参数是负数，那么就从字符串的后面开始计算位置。
<body>
<p id="demo">I am Chinese</p>
<script>
var str = "I am Chinese";
var res = str.slice(5,12);
document.getElementById("demo").innerHTML = res;
</script>
</body>