JavaScript string manipulation regular expression tutorial! ! !

table of Contents

 

1. Commonly used string object methods:

2. String connection

3. String search

4. Interception of strings

5. String replacement

6. Cutting of strings

Regular expression

1. The composition of regular expressions

2. How to use regular expressions


1. Commonly used string object methods:

		<script type="text/javascript">
			var str = "apple";
			var str1 = "21";
			var str2 = "LOVE";
			//用大号字体显示字体串
			document.write(str.big());
			document.write("<br/>");
			//以打字机文本显示字符串
			document.write(str.fixed());
			document.write("<br/>");
			//设置字符串颜色
			document.write(str.fontcolor("red"));
			document.write("<br/>");
			//设置字符串大小
			document.write(str.fontsize('15px'));
			document.write("<br/>");
			//用小号字体显示字体串
			document.write(str.small());
			document.write("<br/>");
			//使用删除线显示字符串
			document.write(str.strike());
			document.write("<br/>");
			//将字符串显示为上标和下标
			document.write(str1.sup());
			document.write(str1.sub());
			document.write("<br/>");
			//将字符串转换为大写 两种方法
			document.write(str.toUpperCase());
			document.write("&nbsp&nbsp");
			document.write(str.toLocaleUpperCase());
			document.write("<br/>");
			//将字符串转换为小写 两种方法
			document.write(str2.toLocaleLowerCase());
			document.write("&nbsp&nbsp");
			document.write(str2.toLowerCase());
			document.write("<br/>");
			//返回某个字符串对象原始值
			document.write(str.valueOf());
		</script>

 Demonstration effect:

2. String connection

  • "+" sign connection Format: string 1 + string 2+......
  • concat function Format: string name.concat(string1,string2,......)
		<script type="text/javascript">
			var str1 = "hello";
			var str2 = "world";
			var str3 = str1 + " " + str2;
			var str4 = str1.concat(" "+str2);
			document.write(str3);
			document.write("<br/>");
			document.write(str4);
		</script>

Demonstration effect: the effect of the two methods is the same, the above "" can be understood as a space.

3. String search

  • indexOf() method Format: string name.indexOf (search term, starting index position), if no index is specified, the default is 0
  • lastIndexOf() method Format: string name.lastIndexOf() (search term, starting index position), check the index order from back to front
  • search() method format: string name.search (search term) / string name.search (regular expression), used to retrieve the specified substring in the string, or used to retrieve the matching regular expression Substring. Returns the starting position of the first matched substring, or -1 if there is no match 
  • match() Format: string name.match (search term) / string name.match (regular expression). The specified value can be retrieved in the string, or multiple regular expression matching results can be found. If the search term or regular expression is not found, then match() performs a match from the starting position, and returns null if no match is found. Otherwise, an array is returned, and the returned array content is [matching text, index: ,input:]
		<script type="text/javascript">
			var str1 = "IhaBCIEco";
			document.write(str1.indexOf("I",3));
			document.write("<br/>");
			document.write(str1.indexOf("ha"));
			document.write("<br/>");
			document.write(str1.lastIndexOf("a"));
			document.write("<br/>");
			document.write(str1.lastIndexOf("I", 3));
			document.write("<br/>");
			document.write(str1.search("a"));
			document.write("<br/>");
			document.write(str1.search("e"));
			document.write("<br/>");
			document.write(str1.search(/e/i)); //忽视大小写,/i
			document.write("<br/>");
			document.write(str1.match("d"));
			document.write("<br/>");
			document.write(str1.match("a"));
			console.log(str1.match("a")); //控制台会得到一个数组
		</script>

Demonstration effect:

match() will return an array containing text information, index, and input information

4. Interception of strings

  • substring() Method Format: string name.substring (start position of interception, end position of interception). The parameter cannot be a negative number, if it is a negative number, the default is 0, and the entire string is intercepted. When there is only one parameter, it means to intercept the string of this parameter to the end.
  • slice() method Format: string name. slice (start position of interception, end position of interception). If the parameter is a negative number, it means that the index of the string is calculated from the end. For example: -1 means the last character.
  • substr() method Format: string name.substr (start position of interception, length). Represents length characters including the beginning of the interception position (including the characters at the interception position). As long as one parameter indicates the string from the interception position to the end.
		<script type="text/javascript">
			var str1 ="woshigexiannva";
			console.log(str1.substring(1,3)); //索引从1到3的结果是 os
			console.log(str1.substring(1));   //索引从1到末尾的结果是 oshigexiannva
			console.log(str1.substring(-1));  //索引从1到末尾的结果是 woshigexiannva 
			console.log(str1.slice(1,4));     //索引从1到4的结果是 osh
			console.log(str1.slice(-3,-1));   //索引从-3到-1的结果是 nv
			console.log(str1.slice(1,-1));    //索引从1到-1的结果是 oshigexiannv
			console.log(str1.slice(-1,-3));   //索引从-1到-3的结果是 空字符串 
			console.log(str1.substr(1,3));    //索引从1到3的结果是 osh
			console.log(str1.substr(2));      //索引从2到结尾的结果是 shigexiannva 
			console.log(str1.substr(-2,4));   //索引从-2到4的结果是 va 
			//此处substr(-2,4),表示从末尾的第二个字符开始,截取四个字符
            //由于后面没有字符了,就显示当前字符
		</script>

Demonstration effect:

5. String replacement

replace() method Format: string name.replace (string/regular expression to be replaced, string after replacement)

		<script type="text/javascript">
			var str1 ="applw";
			document.write(str1.replace("w","e"));
		</script>

Demonstration effect:

6. Cutting of strings

Split method Format: split (substring used for splitting, returns the maximum length of the array)

		<script type="text/javascript">
			var str1 ="a|b|c|d|e";
			console.log(str1.split("|"));
			console.log(str1.split("|",3));
		</script>

Demonstration effect:


Regular expression

1. The composition of regular expressions

  • Match

   [az]: Match any character from a to z in lowercase letters

   [AZ]: Match any character from A to Z in uppercase letters

   [0-9]: Match any character from 0 to 9

   [0-9a-z]: Match any character in the numbers 0~9 or lowercase letters a~z

   [0-9a-zA-Z]: Match any character in the numbers 0~9 or a~z uppercase and lowercase letters

   [abdc]: Match any character in abcd

   [1234]: Match any character in the number 1234

   ^ This symbol means negation, [^0-9]: means any character except the numbers 0-9

  • Qualifier

    *: Match the preceding sub-expression zero or more times, you can use {0,} instead

    +: Match the preceding sub-expression one or more times, you can use {1,} instead

     ?: Match the preceding sub-expression zero or one time, you can use {0,1} instead

     {n}: Matching determined n times, such as {10}, matching 10 times in a row

     {n,}: match at least n times, for example {2}, match at least 2 times

     {n,m}: match at least n times and match at most m times, for example {1,5}, match at least once and match at most 5 times

  • Locator

    ^: match the beginning of the input string

    $: match the end position of the input string

    \b: Match a word boundary (the beginning and end of the string, spaces, commas, periods and other symbols)

    \B: match non-word boundaries

  • Escapes

    When encountering special symbols (()[] * \ / ^, etc.), you must use an escape character (backslash \) to escape

		<script type="text/javascript">
			var str1 = "12i345"; //定义一个字符串
			var str2 =   "2020-1-123"; //定义一个错误的日期
			var reg = /[^0-9]/;   //查看数字中是否含有其他字符
			var reg1 = /[\d]{8}/;  //含有8位数字的正则
			var reg2 =/^[\d]{4}-[\d]{1,2}-[\d]{1,2}$/  //日期的正则
			console.log(str1.search(reg)); //找到则返回找到的位置,否则返回-1
			console.log(str1.search(reg1)); //如果有8位数字,返回 0,否则返回-1
			console.log(reg2.test(str2)); //test 效验,符合返回 true ,否则返回 false
		</script>

Demo results:

 

2. How to use regular expressions

  • String method:

   search(),match(),replace(),split() have been introduced above, do not repeat the introduction

  • Regular object method:

   test() returns true if it matches the regular expression, otherwise it returns false

  exec() returns an array if it finds a match, returns null if no match is found


It is forbidden to reprint without permission~ Today is another day of hard work✌

Guess you like

Origin blog.csdn.net/qq_44761243/article/details/109051480