一、背景
做文件预览功能时,想在 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>
结果如下:
这两种方法都可直接截取后缀,看起来用法类似,但还是有区别的,文末再做解释。
方法二: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>
结果如下:
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>
这两个方法可以返回字符串中匹配子串的第一个字符、最后一个字符的下标,合理的使用可以是上面的截取方法更为灵活。