Home >Web Front-end >JS Tutorial >Detailed example of how Javascript uses functions and regular expressions to obtain static page parameter values

Detailed example of how Javascript uses functions and regular expressions to obtain static page parameter values

伊谢尔伦
伊谢尔伦Original
2017-07-26 17:24:261653browse

To obtain the passed values ​​of HTML static page parameters, you can use the split function to cut into arrays by parameters and use regular expressions to obtain them. The specific implementation is as follows

Example 1 Use regular expressions to obtain Get

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 method

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

Example 2 Use the split function to cut into arrays according to parameters

<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>

But be sure to remember that this method is only for files containing The URL of the parameter is useful. If the other party uses the POST method to pass the parameter, the URL will not contain the parameter, so this technique is only useful for the GET method or the URL with specified parameters.

Look at a complete example below
aa.htm is the parameter input and penetration interface
bb.htm is the parameter receiving and processing interface
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>


The above is the detailed content of Detailed example of how Javascript uses functions and regular expressions to obtain static page parameter values. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn