JS与JQuery字符串处理汇总及实例详解

灰太狼 2022-05-10 07:16 216阅读 0赞

在JS中处理字符串，绝大多数情况是使用函数来处理，一般函数都能够解决问题。

每个函数我都有列出实例，也有一些字符串函数扩充（如去除字符串左边或右边的空格等）实例。看实例之前还是需要知道有哪些函数，才能使用哪些函数更加方便快捷。

废话不多说，请看目录直通车**：**

**目录**

JS处理字符串函数

附加一些字符串处理方式

字符串处理实例

1、 concat()

2、 indexOf()

3、 charAt()

4、 lastIndexOf()

5、 match（）

6、 substring()

7、 replace()

8、 serch()

9、 slice()

10、 length()

11、toLowerCase()

12、toUpperCase()

结合JQuery实现字符串的处理实例

常用正则字符

--------------------

# **JS处理字符串函数**  #

<table>  &nbsp;  
 <tbody> 
  <tr> 
   <td>concat()</td> 
   <td>将两个或多个字符的文本组合起来，返回一个新的字符串。</td> 
  </tr> 
  <tr> 
   <td>indexOf()</td> 
   <td>返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 。</td> 
  </tr> 
  <tr> 
   <td>charAT()</td> 
   <td>返回指定位置的字符。</td> 
  </tr> 
  <tr> 
   <td>lastIndexOf()</td> 
   <td>返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回 -1 。</td> 
  </tr> 
  <tr> 
   <td>match()</td> 
   <td>检查一个字符串是否匹配一个正则表达式。</td> 
  </tr> 
  <tr> 
   <td>substring()</td> 
   <td>返回字符串的一个子串。传入参数是起始位置和结束位置。</td> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td>用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。</td> 
  </tr> 
  <tr> 
   <td>search()</td> 
   <td>执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。</td> 
  </tr> 
  <tr> 
   <td>slice()</td> 
   <td>提取字符串的一部分，并返回一个新字符串。</td> 
  </tr> 
  <tr> 
   <td>split()</td> 
   <td>通过将字符串划分成子串，将一个字符串做成一个字符串数组。</td> 
  </tr> 
  <tr> 
   <td>length()</td> 
   <td>返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。</td> 
  </tr> 
  <tr> 
   <td>toLowerCase()</td> 
   <td>将整个字符串转成小写字母。</td> 
  </tr> 
  <tr> 
   <td>toUpperCase()</td> 
   <td>将整个字符串转成大写字母。</td> 
  </tr> 
 </tbody> 
</table>

# 附加一些字符串处理方式 #

（正则字符请点击目录直通车）

<table> 
 <tbody> 
  <tr> 
   <td style="width:556px;">replace(/(^\s*)/g, "")</td> 
   <td style="width:292px;">去除字符串左边的空格。</td> 
  </tr> 
  <tr> 
   <td style="width:556px;">replace(/(\s*$)/g, "");</td> 
   <td style="width:292px;">去除右空格。</td> 
  </tr> 
  <tr> 
   <td style="width:556px;">replace(/(^\s*)|(\s*$)/g, "");</td> 
   <td style="width:292px;">去除前后空格。</td> 
  </tr> 
  <tr> 
   <td style="width:556px;">String.prototype.Mid = substr(start,length);</td> 
   <td style="width:292px;">得到中间的字符串。<span style="color:#f33b45;"><strong>start</strong></span>是要抽取的子串的起始下标，必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。<span style="color:#f33b45;"><strong><em>length</em></strong></span>子串中的字符数。必须是数值。如果省略了该参数，那么返回从 <em>stringObject</em> 的开始位置到结尾的字串。</td> 
  </tr> 
  <tr> 
   <td style="width:556px;"> <p>String.prototype.InStr =</p> <p>function(str){ </p> <p>&nbsp;&nbsp; if(str==null)&nbsp; { <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; str = "";}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> &nbsp;return this.indexOf(str);}</p> </td> 
   <td style="width:292px;">在字符串中查找另一字符串，位置从0开始。</td> 
  </tr> 
  <tr> 
   <td style="width:556px;"> <p>String.prototype.InStrRev =&nbsp; function(str){ </p> <p>&nbsp;&nbsp; if(str==null) { <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; str = "";}<br> return this.lastIndexOf(str);}</p> </td> 
   <td style="width:292px;">在字符串中反向查找另一字符串，位置0开始。</td> 
  </tr> 
  <tr> 
   <td style="width:556px;">replace(/[^\x00-\xff]/g,"**").length;</td> 
   <td style="width:292px;">计算字符串长度。[^\x00-\xff]应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）。</td> 
  </tr> 
  <tr> 
   <td style="width:556px;">return !/[\\\/\*\?\|:"&lt;&gt;]/g.test(this);</td> 
   <td style="width:292px;">检查字符串是否是合法的文件名/目录名。</td> 
  </tr> 
  <tr> 
   <td style="width:556px;">return /^http[s]?:\/\/([\w-]+\.)+[\w-]+([\w-./?%&amp;=]*)?$/i.test(this);</td> 
   <td style="width:292px;">检查字符串是否是有效链接。</td> 
  </tr> 
 </tbody> 
</table>

## **字符串处理实例** ##

可能有老兄还不清楚JS代码可以在浏览器的控制台调试，这边给您上个Chrome的控制台的图：

![70][]

### 1、 concat() ###

var a = "Hello";
    var b = ",world";
    var c = a.concat(b);
    alert(c);

### **2、 indexOf()** ###

var a = "Hello";
    var index1 = a.indexOf("l");
    alert(index1 );
    var index2 = a.indexOf("l",3);
    alert(index2 );

### **3、 charAt()** ###

var a = "Hello";
    var get_char = a.charAt(0);

### **4、** **lastIndexOf()** ###

var a="Hello";
    var index1 = a.lastIndexOf('l');
    var index2 = a.lastIndexOf('l',2)

### 5、 **match（）** ###

这个函数的用法十分灵活，这里提供两个例子。

**例1：**

var str="Hello world!"
    document.write(str.match("world") + "<br />")
    document.write(str.match("World") + "<br />")
    document.write(str.match("worlld") + "<br />")
    document.write(str.match("world!"))

**例2：**

var a="Hello";
    var b=",world!";
    var zhengze = new RegExp(/^\w+$/);
    var getA= a.match(zhengze);
    //getA = "hello"
    var getB= b.match(zhengze);
    //getB = null

### 6、 substring() ###

**例1：**

var a="Hello";
    var sub_string1 = a.substring(1);
    var sub_string2 = a.substring(1,4);
    //sub_string1 = "ello"
    //sub_string2 = "ell"

**例2：**

var str="Hello world!"
    document.write(str.substring(3,7))
    //运行结果：lo w

### 7、 replace() ###

var a="Hello";
    var b=",world";
    var result1 = a.replace(re,"Hello");
    //result1 = "Hello"
    var result2 = b.replace(re,"Hello");
    //result2 = ",world"

### 8、 serch() ###

**例1：**

var a="Hello";
    var b=",world";
    var index1 = a.search(/ll/);
    var index2 = b.search(/z/);
    //index2 = -1

**例2：**

var str="Visit DJun!"
    document.write(str.search(/djun/i))
    //本例使用/i可以忽略大小写进行检索

### 9、 **slice()** ###

var a="Hello";
    var arr1 = a.split("");
    //arr1 = [h,e,l,l,o]

### 10、 **length()** ###

var a="Hello";
    var len = a.length();
    //len = 5

### 11、**toLowerCase()** ###

var a="Hello";
    var lower_string = a.toLowerCase();
    //lower_string = "Hello"

### 12、**toUpperCase()** ###

var a="Hello";
    var upper_string = a.toUpperCase();
    //upper_string = "HELLO"

## 结合JQuery实现字符串的处理实例 ##

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>DJun（https://blog.csdn.net/qq_41647999）</title>
    		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    		<style type="text/css">
    			.bigbox{
    				width: 100%;
    				text-align: center;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="" class="bigbox">
    	<h1><a href="https://blog.csdn.net/qq_41647999">DJun's Blog,thanks for you!</a></h1>
    			输入字符串：<input type="text" name="inString" id="inString"/>
    						<input type="submit" name="inSubmit" id="subString" value="提交"/><br/><br/>
    
    			删除字符串：<input type="text" name="delHandle" id="delString" />
    						<input type="submit" name="delSubmit" id="delHandle" value="删除"/><br/><br/>
    			<span id="showLen"></span>
    			<span id="showNum"></span>
    			<span id="showDel"></span>
    		</div>
    
    		<script type="text/javascript">
    	
    			$("#subString").click(function(){
    			//------------ 获取字符串的字符个数 -----------
    				var showStringLen=" ";
    				var getInString=document.getElementById('inString').value;
    				if (getInString.length>0) {
    					showStringLen+="<p>输入的字符串共有"+getInString.length+"个字符</p>";
    					$("#showLen").append(showStringLen);
    			//----------- 得到输入字符串中的数字 --------
    					var showNumInString=" ";
    					var numInString=getInString.replace(/[^0-9]/g," ");
    					var numLen=getInString.match(/\d/g);
    					// console.log(numInString.length);
    					showNumInString+="<p>输入的字符串的数字为"+numInString+"，共有"+numLen.length+"个数字</p>";
    					$("#showNum").append(showNumInString);
    				}
    			});
    			//-------------- 删除字符串 -----------------
    			$("#delHandle").click(function(){
    				var showDelString=" ";
    				var getInString=document.getElementById('inString').value;
    				var getDelString=document.getElementById('delString').value;
    
    				if (getDelString.length>0) {
    					// console.log(getInString.match(/[^getDelString]/g));
    					// getInString.replace(new RegExp(getDelString,'g'),"");//测试成功
    					showDelString+="<p>删除 "+getDelString+" 之后的字符串为"+getInString.replace(new RegExp(getDelString,'g'),"")+"</p>";
    					$("#showDel").append(showDelString);
    				}
    			});
    			
    		</script>
    	</body>
    </html>

## 常用正则字符 ##

（原文来自：[https://www.cnblogs.com/moqiutao/p/6513628.html][https_www.cnblogs.com_moqiutao_p_6513628.html]，本人以传递知识的心态引用文章，若有侵权，联系即删！）

1.**`\`** : 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'n' 匹配一个换行符。序列 '\\' 匹配 "" 而 "(" 则匹配 "("。

2.**`^`**：匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 'n' 或 'r' 之后的位置。

3.**`$`**：匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 'n' 或 'r' 之前的位置。

4.**`*`**：匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于\{0,\}。

5.**`+`**：匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 \{1,\}。

6.**`?`**：匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 \{0,1\}。

7.**`{n}`**：n 是一个非负整数。匹配确定的 n 次。例如，'o\{2\}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。

8.**`{n,}`**：n 是一个非负整数。至少匹配n 次。例如，'o\{2,\}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o\{1,\}' 等价于 'o+'。'o\{0,\}' 则等价于 'o\*'。

9.**`{n,m}`**：m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o\{1,3\}" 将匹配 "fooooood" 中的前三个 o。'o\{0,1\}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。

10.**`?`**：当该字符紧跟在任何一个其他限制符 (\*, +, ?, \{n\}, \{n,\}, \{n,m\}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。

11.**`·`**：匹配除 "n" 之外的任何单个字符。要匹配包括 'n' 在内的任何字符，请使用象 '\[.n\]' 的模式。

12.**`(pattern)`**：匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 0…

9 属性。要匹配圆括号字符，请使用 '(' 或 ')'。

13.**`(?:pattern)`**：匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。

14.**`(?=pattern)`**：正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如，'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。

15.**`(?!pattern)`**：负向预查，在任何不匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows"，但不能匹配 "Windows 2000" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始

16.**`x|y`**：匹配 x 或 y。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。

17.**`[xyz]`**：字符集合。匹配所包含的任意一个字符。例如， '\[abc\]' 可以匹配 "plain" 中的 'a'。

18.**`[^xyz]`**：负值字符集合。匹配未包含的任意字符。例如， '1' 可以匹配 "plain" 中的'p'。

19.**`[a-z]`**：字符范围。匹配指定范围内的任意字符。例如，'\[a-z\]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。

20.**`[^a-z]`**：负值字符范围。匹配任何不在指定范围内的任意字符。例如，'2' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。

21.**`\b`**：匹配一个单词边界，也就是指单词和空格间的位置。例如， 'erb' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。

22.**`\B`**：匹配非单词边界。'erB' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。

23.**`\cx`**：匹配由 x 指明的控制字符。例如， cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。

24.**`\d`**：匹配一个数字字符。等价于 \[0-9\]。

25.**`\D`**：匹配一个非数字字符。等价于 3。

26.**`\f`**：匹配一个换页符。等价于 x0c 和 cL。

27.**`\n`**：匹配一个换行符。等价于 x0a 和 cJ。

28.**`\r`**：匹配一个回车符。等价于 x0d 和 cM。

29.**`\s`**：匹配任何空白字符，包括空格、制表符、换页符等等。等价于 \[ fnrtv\]。

30.**`\S`**：匹配任何非空白字符。等价于 4。

31.**`\t`**：匹配一个制表符。等价于 x09 和 cI。

32.**`\v`**：匹配一个垂直制表符。等价于 x0b 和 cK。

33.**`\w`**：匹配包括下划线的任何单词字符。等价于'\[A-Za-z0-9\_\]'。

34.**`\W`**：匹配任何非单词字符。等价于 '5'。

35.**`\xn`**：匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，'x41' 匹配 "A"。'x041' 则等价于 'x04' & "1"。正则表达式中可以使用 ASCII 编码。

36.**`\num`**：匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)1' 匹配两个连续的相同字符。

37.**`\n`**：标识一个八进制转义值或一个向后引用。如果 n 之前至少 n 个获取的子表达式，则 n 为向后引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。

38.**`\nm`**：标识一个八进制转义值或一个向后引用。如果 nm 之前至少有 nm 个获得子表达式，则 nm 为向后引用。如果 nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的向后引用。如果前面的条件都不满足，若 n 和 m 均为八进制数字 (0-7)，则 nm 将匹配八进制转义值 nm。

39.**`\nml`**：如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。

[70]: /images/20220510/a9f26c40f81f4bd3ad69a432477b588a.png
[https_www.cnblogs.com_moqiutao_p_6513628.html]: https://www.cnblogs.com/moqiutao/p/6513628.html