Member Avatar for hyper_boom

Good afternoon,

I need to display part of a url so that testers know which development site they are looking at.

At the moment I am using: <script language="javascript">document.writeln(document.location);</script> but this displays the whole url such as example:

and would love it to be:

Any ideas?

  • 2 Contributors
  • 6 Replies
  • 108 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by hyper_boom

Dani AI

Generated

A concise follow-up: 's split-and-extract approach and the quoted document.location mistake explain why the original snippet printed the literal text. confirmed the quick fix. For a more robust, future‑proof approach, prefer the browser Location API (or location.origin where supported) and insert the result into the DOM rather than using document.write/document.writeln.

A recommended pattern (handles origin, protocol/host/port fallback and avoids document.write):

var base = location.origin || (location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : ''));
base = base + '/';

var footer = document.getElementById('footer');
if (footer) {
  footer.textContent = 'You are using the ' + base + ' version of this application';
}

Notes and troubleshooting:

  • location.origin is the simplest; older browsers need the protocol+hostname+port fallback shown above.
  • textContent (or innerText as a fallback) writes safely to an element after DOM load; document.write can overwrite the page if used after load and is best avoided.
  • Be aware of non-HTTP schemes (file:, about:) and special hostnames (localhost, internal IPs); these can change the displayed base.
  • For quick inspection, log location.protocol, location.hostname, and location.port in the console to confirm values.

Further reading on the Location API is available on MDN: Location (MDN).

Recommended Answers

All 6 Replies

Member Avatar for scrappedcola

I'm not very good at regex so I won't attempt to answer with that but you can use simple string operations to achieve this. You could first split the location by "//" and then split the string again by /.

var loc = ""; /* you would use document.location */
loc = loc.split("//");
var protocol = loc[0];
loc = loc[1];
var finalDisplay = protocol + "//" + loc.split("/")[0] + "/";

It's a bit messy but does what you want.

Member Avatar for hyper_boom

Thank you for this Scappedcola, I cant get it to work but I am guessing I am doing something wrong.

I have inserted the code in like this just above the previous code:

<script language="javascript">
	var loc = "document.location";
	loc = loc.split("//");
	var protocol = loc[0];
	loc = loc[1];
	var finalDisplay = protocol + "//" + loc.split("/")[0] + "/";
</script>

What am I doing wrong?

Member Avatar for scrappedcola

Don't put document.location in quotes. What you are assigning loc is a string containing the words document.location. Instead do:

var loc = document.location.toString();
Edited by mike_2000_17 because: Fixed formatting
Member Avatar for hyper_boom

Thank you for the quick reply Scappedcola, it is not working as of yet.

The code at the moment looks like this:

<script language="javascript">
	var loc = document.location.toString();
	loc = loc.split("//");
	var protocol = loc[0];
	loc = loc[1];
	var finalDisplay = protocol + "//" + loc.split("/")[0] + "/";
</script>

<div id="footer">You are using an <b><script language="javascript">

document.writeln(document.location);

</script> </b>version of this application </div>
Member Avatar for scrappedcola 
div id="footer">You are using an <b><script language="javascript">
 
document.writeln(document.location);
 
</script> </b>version of this application </div>

In the above piece are you trying to display the entire URL or the shortened version we create at finalDisplay? If you want the shortened URL to display you need to

document.writeLn(finalDisplay);

Or you will only get the current full URL.

Member Avatar for hyper_boom

Fantastic it works! Thank you for your time!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.