JavaScript 字符串方法

1.获取字符串长度

length--属性返回字符串长度

实例：

<!DOCTYPE html>
<html>
  <body>

    <h1>JavaScript 字符串属性</h1>

      <p>length 属性返回字符串的长度：</p>

      <p id="demo"></p>

      <script>
      var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      document.getElementById("demo").innerHTML = txt.length;
      </script>

  </body>
</html>

输出如下图

2.查找字符串种的字符串

indexOf()--方法返回字符串中指定文本首次出现的索引（位置）（注：是方法，而不是属性）

<!DOCTYPE html>
<html>
  <body>

    <h1>JavaScript 字符串方法</h1>

      <p>indexOf() 方法返回指定文本首次出现的位置：</p>

      <p id="demo"></p>

      <script>
      var str = "The full name of China is the People's Republic of China.";
      var pos = str.indexOf("China");
      document.getElementById("demo").innerHTML = pos;
      </script>

  </body>
</html>

输出如下图


注：这里返回的是第一个"China"中"C"的下标，而不是后面的"China"
lastIndexOf()--方法返回指定文本在字符串中最后一次出现的索引

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>lastIndexOf() 方法返回指定文本最后一次出现的位置：</p>

<p id="demo"></p>

<script>
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>

输出如下图


注：如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
indexOf()和lastIndexOf()方法都支持第二个参数：

var pos = str.indexOf("China", 18); //从下标为18的位置**从头到尾**搜索
var pos = str.lastIndexOf("China", 50);  //从下标为50的位置**从尾到头**搜索，返回的任然是当前搜索字符串起始下标,第一个"China"中"C"的下标

2.检索字符串种的字符串

search()--方法返回字符串中指定文本首次出现的索引（位置）

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>search() 方法返回字符串中指定文本第一次出现的位置：</p>

<p id="demo"></p>

<script>
var str = "The full name of China is the People's Republic of China.";
var pos = str.search("China");
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>

输出如下图

indexOf()与search()方法的区别

  • search() 方法无法设置第二个开始位置参数。
  • indexOf() 方法无法设置更强大的搜索值（正则表达式）

2.提取部分字符串

有三种提取部分字符串的方法：

  • slice(start, end)
  • subString(start, end)
  • subStr(start, end)

2.1 slice()方法

slice()--提取字符串的某个部分并在新字符串中返回被提取的部分
参数：起始索引（开始位置），终止索引（结束位置）。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>slice() 提取字符串的某个部分，并在新字符串中返回被提取的部分。</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Mango";
var res = str.slice(7,13);
document.getElementById("demo").innerHTML = res; 
</script>

</body>
</html>

输出结果如下

注：起始位置取值，结尾位置不取值
当参数为负数时，从字符串后面往前取，最后一个字符位置为0；当为一正一负时，报错

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>slice() 提取字符串的某个部分，并在新字符串中返回被提取的部分。</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Mango";
var res = str.slice(-13,-7);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>

输出如下

单参数为一个正数时，此参数为起始位置，返回从起始位置到剩下全部字符

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>slice() 提取字符串的某个部分，并在新字符串中返回被提取的部分。</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Mango";
var res = str.slice(13);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>

输出如下

当参数是有一个负数时，默认为从后（从0开始）往前数的结束位置

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>slice() 提取字符串的某个部分，并在新字符串中返回被提取的部分。</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Mango";
var res = str.slice(-13) 
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>

输出如下

当参数为一个0或为空时，返回字符串全部内容，为两个0时，报错

2.2 subString()方法

substring() 类似于 slice()。
不同之处在于 substring() 无法接受负的索引。

2.3 subStr()方法

类似于slice(),不同之处在于，subStr()方法中的第二个参数是要截取字符串的长度，不能为负数

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>substr() 提取字符串的某个部分，并在新字符串中返回被提取的部分。</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Mango";
var res = str.substr(7,6);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>

输出如下

如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>substr() 提取字符串的某个部分，并在新字符串中返回被提取的部分。</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Mango";
var res = str.substr(7);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>

输出如下

如果首个参数为负，则从字符串的结尾计算位置。

var str = "Apple, Banana, Mango";
var res = str.substr(-5);

res 的结果是："Mango"

3.替换字符串内容

3.1 replace()方法

replace()方法返回的是新的字符串不会改变原来字符串，默认地只替换首个匹配项

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>请把下面的段落中的“Microsoft”替换为“W3School”：</p>

<button onclick="myFunction()">试一试</button>

<p id="demo">请访问 Microsoft 和 Microsoft！</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("Microsoft","W3School");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

输出

replace()对大小写敏感

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>请把下面的段落中的“Microsoft”替换为“W3School”：</p>

<button onclick="myFunction()">试一试</button>

<p id="demo">请访问 Microsoft 和 Microsoft！</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("MicroSOft","W3School");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

输出

如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>请把下面的段落中的“Microsoft”替换为“W3School”：</p>

<button onclick="myFunction()">试一试</button>

<p id="demo">请访问 Microsoft 和 Microsoft！</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace(/MicroSOft/i,"W3School");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

输出

请注意正则表达式不带引号。
如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>请把下面的段落中的“Microsoft”替换为“W3School”：</p>

<button onclick="myFunction()">试一试</button>

<p id="demo">请访问 Microsoft 和 Microsoft！</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace(/MicroSOft/ig,"W3School");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

输出（忽略大小写，并全部替换匹配项目）

4.字符串转换大小写

4.1 toUpperCase()

通过 toUpperCase() 把字符串转换为大写,返回新的字符串：

var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1

输出："HELLO WORLD!"

4.2 toLowerCase()

通过 toUpperCase() 把字符串转换为大写,返回新的字符串：

var text1 = "HELLO WORLD!";       // 字符串
var text2 = text1.toLowerCase();  // text2 是被转换为大写的 text1

输出："Hello World!"

5.字符串拼接

5.1 concat()方法连接两个或多个字符串：

var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);

输出:text3为"Hello World"
所有字符串方法都会返回新字符串。它们不会修改原始字符串。

正式地说：字符串是不可变的：字符串不能更改，只能替换。

6.删除字符串两端空白

posted on 2021-03-16 10:56  武当山大神父王喇嘛  阅读(25)  评论(0)    收藏  举报