Remove the extension from URL name and add a common class to body
Question
how can i remove the .html from the URL and add a common class por example inners
this is my code:
$(document).ready(function() {
var path = window.location.pathname;
var newClass = path.match(/[^\/]*[^\d\/][^\/]*/);
$('body').addClass(newClass[0]);
});
The result of actual code is: <body class="lastname.html">
Should be <body class="inners lastname">
-EDIT- .
this is the code:
<script>
$(document).ready(function() {
// Get the current URL
var path = window.location.pathname;
// Split the path up by the backslash that separates directories ->
// Pop the last array element ->
// RegEx Replace the strings ".html" ".php" and ".htm" with a 0 space string
var newClass = path.split("/").pop().replace(/.html|.php|.htm/gi,'');
// Update the body class
$('body').addClass(newClass+" inners");
});
1 answers
solution1
0 ACCPTED 2018-04-06 04:15:08
You can complete this action in three steps, once inside your document.ready function.
You can use native JavaScript Methods to parse out the piece of the URL you need to set your class in a single line.
Split the path variable with the "/" (backslash) to create an array of the URL split by the character that separates parts of the URI. The part you are looking for is at the end.
JavaScripts pop method makes it easy to pull the last array element.
JavaScripts replace method accepts strings and regular expressions. The one used here "/.html|.php|.htm/gi" tells the browser to replace any part of the string that came out of the pop method that is ".html" OR ( | ) ".php" OR ( | ) ".htm" with a 0 space empty string.
Instead of having to select through and array (newClass[0]), you can just set the string to your variable this way as well.
<script>
$(document).ready(function() {
// Get the current URL
var path = window.location.pathname;
// Split the path up by the backslash that separates directories ->
// Pop the last array element ->
// RegEx Replace the strings ".html" ".php" and ".htm" with a 0 space string
var newClass = path.split("/").pop().replace(/.html|.php|.htm/gi,'');
// Update the body class
$('body').addClass(newClass+" inners");
});
</script>
EDIT:
To shorten it up, instead of setting the variable, you could just perform the methods inside of jQuery's addClass method, like so:
<script>
$(document).ready(function() {
// Get the current URL
// Split the path up by the backslash that separates directories ->
// Pop the last array element ->
// RegEx Replace the strings ".html" ".php" and ".htm" with a 0 space string
// Update the body class
$('body').addClass(window.location.pathname.split("/").pop().replace(/.html|.php|.htm/gi,"")+" inners");
});
</script>
EDIT:
In response to the comments, I am providing two more options to resolve this:
This one adds a ternary operator where you can set specific page names in a single line and it will just check them and set the class name in the variable.
<script>
$(document).ready(function() {
// Get the current URL
// Split the path up by the backslash that separates directories ->
// Pop the last array element ->
// RegEx Replace the strings ".html" ".php" and ".htm" with a 0 space string
var name = window.location.pathname.split("/").pop().replace(/.html|.php|.htm/gi,"");
// Ternary Operator to check if the page is lastname
// If it is, it adds lastname and inners as a class.
// If not, it only adds inners as a class
(name = 'lastname') ? (customClass=name+" inners") : (customClass="inners");
// Update the body class
$('body').addClass(customClass);
});
</script>
In this option, I have implemented a Switch Statement, in this case you can set custom classes for each page you desire, and with the "default" option, set one to go on anything that doesn't match any of the cases.
<script>
$(document).ready(function() {
// Get the current URL
// Split the path up by the backslash that separates directories ->
// Pop the last array element ->
// RegEx Replace the strings ".html" ".php" and ".htm" with a 0 space string
var name = window.location.pathname.split("/").pop().replace(/.html|.php|.htm/gi,"");
// If you have more than one instance where you would like to apply different
// values based where the user is, use a switch statement
switch (name) {
case 'lastname':
var customClass = name+" ";
break;
case 'account_page':
var customClass = name+" ";
break;
case 'index':
var customClass = name+" ";
break;
default:
// Set the customClass to an empty string
var customClass = "";
}
// If you want the customClass to always have a default setting you can apply
// that here
customClass += "all-pages";
// Update the body class
$('body').addClass(customClass);
});
</script>
EDIT:
As to further discussion in the comments, please try this approach instead.
Here, if the set of methods to get the page name comes back empty, then user is at the root of the site (www.example.com/). So we run a simple if statement on it to see if it has a value. If it does have a value, then we will add the page name and the additional "inners" class to the body.
<script>
$(document).ready(function() {
// Get the current URL
// Split the path up by the backslash that separates directories ->
// Pop the last array element ->
// RegEx Replace the strings ".html" ".php" and ".htm" with a 0 space string
var name = window.location.pathname.split("/").pop().replace(/.html|.php|.htm/gi,"");
// If the location comes back empty, it is at the site root. Anything with a value
// is an "inner" page.
if(name != '') {
$('body').addClass(name+" inners");
}
// Optionally you can run it in a ternary to save space by commenting out the above if statement and uncommenting the line below.
// (name != '') ? $('body').addClass(name+" inners") : $('body').addClass("");
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.