Easily Get Query String Parameters with JavaScript
Ever wanted to quickly and easily access your url query parameters?
Let's suppose you want to develop a web page that will display different youtube videos based on the url parameter.
Assuming this is your url you want to work with and id is the youtube video you want to display: https://codewithmark.com/video/?id=YJ5X9mt-5cg&code123
Extract URL Parameter
First, you will have extract the "id" parameter out of url.
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
var get_id = getUrlParameter('id');
console.log(qry_para );
//YJ5X9mt-5cg Display Youtube Video
if(get_id)
{
var str = ''
+'<div class="embed-responsive embed-responsive-16by9">'
+'<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/'+get_id+'?rel=0"></iframe>'
+'</div>'
//div where you want to show video
$('.youtube_video').html(str)
}Everything Combined
<!DOCTYPE html>
<html lang="en">
<head>
<title>YouTube Videos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function($)
{
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
var get_id = getUrlParameter('id');
if(get_id)
{
var str = ''
+'<div class="embed-responsive embed-responsive-16by9">'
+'<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/'+get_id+'?rel=0"></iframe>'
+'</div>'
//div where you want to show video
$('.youtube_video').html(str)
}
});
</script>
</head>
<body>
<div class="youtube_video"></div>
</body>
</html>Your Next PHP Project Could Make You Money for Years
Most developers get paid once for the code they write. But the developers building real wealth use those same skills to create products that generate income over and over again.
A simple SaaS, plugin, web app, or digital product can continue bringing in customers long after it's launched.
Learn How Developers Build Monthly Income →
