집 >웹 프론트엔드 >JS 튜토리얼 >Javascript가 함수와 정규식을 사용하여 정적 페이지 매개변수 값을 얻는 방법에 대한 자세한 예

Javascript가 함수와 정규식을 사용하여 정적 페이지 매개변수 값을 얻는 방법에 대한 자세한 예

伊谢尔伦원래의: 2017-07-26 17:24:261655검색

HTML 정적 페이지 매개변수의 전달된 값을 얻으려면 분할 기능을 사용하여 매개변수별로 배열을 자르고 정규식을 사용하여 이를 얻을 수 있습니다. 구체적인 구현은 다음과 같습니다

예제 1 정규식을 사용하여

var LocString = String(window.document.location.href); 
function getQueryStr(str) { 
var rs = new RegExp("(^|)" + str + "=([^&]*)(&|$)", "gi").exec(LocString), tmp; 
if (tmp = rs) { 
return tmp[2]; 
} 
// parameter cannot be found 
return ""; 
}

Call 메소드 얻기

document.getElementById("user").value = getQueryStr("user"); 
document.getElementById("password").value = getQueryStr("password"); 
document.getElementById("sysno").value = getQueryStr("sysno");

예제 2 분할 함수를 사용하여 매개변수에 따라 배열을 자르세요

<script> 
urlinfo=window.location.href; //获取当前页面的url 
len=urlinfo.length;//获取url的长度 
offset=urlinfo.indexOf("?");//设置参数字符串开始的位置 
newsidinfo=urlinfo.substr(offset,len)//取出参数字符串 这里会获得类似“id=1”这样的字符串 
newsids=newsidinfo.split("=");//对获得的参数字符串按照“=”进行分割 
newsid=newsids[1];//得到参数值 
alert("您要传递的参数值是"+newsid); 
</script>

그러나 이 방법은 상대방이 매개변수를 포함하는 URL에만 유용하다는 점을 기억하세요. 매개변수를 전달하는 POST 메소드, URL에는 매개변수가 포함되지 않으므로 이 기술은 GET 메소드 또는 지정된 매개변수가 있는 URL에만 유용합니다.

전체 예를 살펴보겠습니다.
aa.htm은 매개변수 입력 및 침투 인터페이스입니다.
bb.htm은 매개변수 수신 및 처리 인터페이스
aa.htm

　<html> 
　　<head> 
　　</head> 
　　<body> 
　　<script> 
　　function submit() 
　　{ 
　　var input1 = document.getElementById("inputid"); 
　　window.open("bb.htm?inputStr=" + input1.value);//传入参数 
　　} 
　　</script> 
　　<input type = "text" id = "inputid"> 
　　<input type = "button" onclick = "submit()" value = "提交"> 
　　</body> 
　　</html> 
　　bb.htm: 
　　<html> 
　　<head> 
　　<script> 
　　//获得参数的方法 
　　var request = 
　　{ 
　　QueryString : function(val) 
　　{ 
　　var uri = window.location.search; 
　　var re = new RegExp("" +val+ "=([^&?]*)", "ig"); 
　　return ((uri.match(re))?(uri.match(re)[0].substr(val.leng th+1)):null); 
　　} 
　　} 
　　</script> 
　　</head> 
　　<body> 
　　<script> 
　　//调用方法获得参数 
　　var rt = request.QueryString("inputStr"); 
　　alert(rt); 
　　</script> 
　　</body> 
　　</html>

bb.htm

<html> 
　　<head> 
　　<title>test</title> 
　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
　　<SCRIPT LANGUAGE="JavaScript"> 
　　<!-- 
　　var request = { 
　　QueryString : function(val) { 
　　var uri = window.location.search; 
　　var re = new RegExp("" +val+ "=([^&?]*)", "ig"); 
　　return ((uri.match(re))?(uri.match(re)[0].substr(val.leng th+1)):null); 
　　} 
　　} 
　　var a = request.QueryString ("a"); 
　　var b = request.QueryString ("b"); 
　　var c = request.QueryString ("c"); 
　　if ((a != null)){a=a} else{a="参数A空"} 
　　if ((b != null)){b=b} else{b="参数B空"} 
　　if ((c != null)){c=c} else{c="参数C空"} 
　　document.writeln("参数A: " + a); 
　　document.writeln("<br>参数B: " + b); 
　　document.writeln("<br>参数C: " + c); 
　　//--> 
　　</SCRIPT> 
　　</head> 
　　<body> 
　　<form name="form1" action="?"> 
　　请输入参数值:<br> 
　　<SCRIPT LANGUAGE="JavaScript"> 
　　document.writeln("A:<input type=&#39;text&#39; name=&#39;a&#39; value=&#39;"+a+"&#39;><br>"); 
　　document.writeln("B:<input type=&#39;text&#39; name=&#39;b&#39; value=&#39;"+b+"&#39;><br>"); 
　　document.writeln("C:<input type=&#39;text&#39; name=&#39;c&#39; value=&#39;"+c+"&#39;><br>"); 
　　</SCRIPT> 
　　<input type="submit" name="Submit" value="提交参数查观效果"> 
　　</form> 
　　</body> 
　　</html>

위 내용은 Javascript가 함수와 정규식을 사용하여 정적 페이지 매개변수 값을 얻는 방법에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：매개변수가 포함된 javascript 함수 setTimeout의 사용 예에 대한 자세한 설명다음 기사：매개변수가 포함된 javascript 함수 setTimeout의 사용 예에 대한 자세한 설명