Home/ Questions/Q 6179535
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T00:41:02+00:00

I’m a designer not a JS coder so any help would be great on

  • 0

I’m a designer not a JS coder so any help would be great on this.

Using javascript or jquery how would I replace content on a page via a string in the url?

So if content ‘A’ is just the normal content via this http://www.example.com and if ‘A’ is replaced by content ‘B’ via this http://www.example.com/index.html?content=b.

example:

content A

<div id="video-player">
vimeo code
</div>

to be replaced with content B

<div id="video-player">
youtube code
</div>

via a string in the url like so http://www.example.com/index.html?player=youtube
if there is no string in the url then it will default and just show the vimeo code

edit

ok this is what is on my html page now

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="js/test.js"></script>
</head>

<body>

<div id="video-player">
vimeo
</div>

</body>
</html>

and in js page

window.location.href.split('?')[1].split('&')[0].split('content=')[1]
var content_value = window.location.hash.substring(1) // For hashses OR
var content_value = window.location.href.split('?')[1].split('&')[0].split('content=')[1] // For ?
if (content_value === "b") {
  $('#video-player').html(vimeo_code);
} else {
  $('#video-player').html(youtube_code);

is that right?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The easiest wat to do this would be to use a hash tag. You could use a ? but it is harder to implement. So instead of index.html?content=b use index.html#b and then you can reference to that by using window.location.hash.substring(1) which would give you b in your scenario. Then you can use an if statement to check this value and adjust the content accordingly.

    Alternatively, if you need to use ? then you can use this window.location.href.split('?')[1].split('content=')[1] but it is not guaranteed to work in every situation, especially if you have more than one variable there. For multiple variables you would use 

    window.location.href.split('?')[1].split('&')[0].split('content=')[1]

    Your complete code will now look like this:

    $(function () {
  var youtube_code, vimeo_code, content_value;
  youtube_code = "The code for Youtube goes here";
  vimeo_code = "The code for Vimeo goes here";
  content_value = (typeof window.location.href.split('player=')[1] !== "undefined") ? window.location.href.split('player=')[1] : "";

  if (content_value === "youtube") {
    $('#video-player').html(youtube_code);
  } else {
    $('#video-player').html(vimeo_code);
  }
});

    You could also use some else ifs if you wanted more content options. Use one of the top two lines depending on what option you chose.

    EDIT: changed code to the complete code (and optimised a bit). You do not need to add anything else to this apart from changing the youtube_code and vimeo_code to the correct values.

    EDIT: optimised and made it check if there is actually player= in the url.

    • 0