前端截取字符串方法记录（JQuery）

一时失言乱红尘 2023-07-13 08:19 1阅读 0赞

### 一、背景 ###

做文件预览功能时，想在 JSP 中判断文件后缀名，如 “ 嚣张.jsp ”。

### 二、解决方法 ###

**方法一：substr（）/ substring（）**

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script src="jquery-3.4.1.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>小白网页</title>
    </head>
    
    <body>
    	<h1>小白学习</h1>
    	<input type="text" id="context" />
    	<button onclick="test()">测试</button>
    	<script>
            //substr() 方法用于返回一个从指定位置开始的指定长度的子字符串；
            //substring() 方法用于提取字符串中介于两个指定下标之间的字符。
    	    function test() {
    		var context = $('#context').val();
    		var suffix = context.substr(context.lastIndexOf("."));
    		console.log('suffix==' + suffix);
    	    }
    	    function test1() {
    		var context = $('#context').val();
    		var suffix = context.substring(context.lastIndexOf("."));
    		console.log('suffix==' + suffix);
    	    }
    	</script>
    </body>
    </html>

结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70][]

这两种方法都可直接截取后缀，看起来用法类似，但还是有区别的，文末再做解释。

**方法二：split（）**

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script src="jquery-3.4.1.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>小白网页</title>
    </head>
    
    <body>
    	<h1>小白学习</h1>
    	<input type="text" id="context" />
    	<button onclick="test()">测试</button>
    	<script>
    	    function test() {
    		var context = $('#context').val();
    		var strArray = context.split(".");
    		var length = strArray.length;
    		for (var i in strArray){
    		    console.log('strArray['+ i +']=='+ strArray[i])
    		}
    		console.log('后缀==' + strArray[length-1]);
    	    }
    	</script>
    </body>
    </html>

结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 1][]

split() 中如果用空字符去截取的话会把每一个字符截断开来。 如：context.split(""); 结果为\{嚣,张,.,j,p,g\}

### 三、知识积累 ###

**（1）substr（）/ substring（）的区别**

<body>
    	<h1>小白学习</h1>
    		<button onclick="test()">测试</button>
    	<script>
    		function test() {
    			var str = "Hello world!";
    			// ——————————substr(指定开始下标, 指定截取长度)———————— 
    			console.log('str.substr(0)==' + str.substr(0));// = Hello world!  
                            //---只定义了开始下标，则截取长度默认为字符串长度
    			console.log('str.substr(0,5)==' + str.substr(0,5));// = Hello  
                            //---开始下标为0，截取长度为5
    			console.log('str.substr(2,11)==' + str.substr(2,10));// = llo world!  
                            //---开始下标为2，截取长度为10
    
    			// ——————————substring(指定开始下标，指定结束下标)————————
    			console.log('str.substring(0)==' + str.substring(0));// = Hello world!  
                            //---定义了开始下标，则默认结束下标为字符串最后一个字符的下标
    			console.log('str.substring(0,5)==' + str.substring(0,5));// = Hello  
                            //---开始下标为0，结束下标为5
    			console.log('str.substring(2,11)==' + str.substring(2,10));// = llo worl  
                            //---开始下标为2，结束下标为10（此处与substr区别明显！）
    		}
    	</script>
    </body>

substr() 方法用于返回一个从指定位置开始的指定长度的子字符串；substring() 方法用于提取字符串中介于两个指定下标之间的字符。

**（2）join() ：将数组合并成字符串**

<body>
    	<h2>小白学习</h2>
    	<button onclick="test()">测试</button>
    	<script>
    	    function test() {
    		var myArray=new Array("h","a","n","p","i"); 
    		var str=myArray.join(""); 
    		console.log('str==' + str);
    	    }
    	</script>
    </body>

该方法是使用自定义的分隔符将一个数组合并为一个字符串。

**（3）indexOf（）/ lastIndexOf（）**

<body>
        <h1>小白学习</h1>
            <button onclick="test()">测试</button>
        <script>
            function test() {
                var str = "Hello world!";
                console.log('str.indexOf("o")==' + str.indexOf('o'));// 4
                console.log('str.lastIndexOf("o")==' + str.lastIndexOf('o'));// 7
            }
        </script>
    </body>

这两个方法可以返回字符串中匹配子串的第一个字符、最后一个字符的下标，合理的使用可以是上面的截取方法更为灵活。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020031111304870.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200311115112534.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw==,size_16,color_FFFFFF,t_70