从URL名称中删除扩展名，并向正文添加一个通用类

Question

how can i remove the .html from the URL and add a common class por example inners 我怎样才能从URL中删除.html和添加一个普通类POR例如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"> 实际代码的结果是： <body class="lastname.html">

Should be <body class="inners lastname"> 应该是<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");
});

see image attached 见所附图片

Answer 1

You can complete this action in three steps, once inside your document.ready function. 一旦进入document.ready函数，就可以通过三个步骤完成此操作。

You can use native JavaScript Methods to parse out the piece of the URL you need to set your class in a single line. 您可以使用本机JavaScript方法来解析单行设置类所需的URL片段。

Split the path variable with the "/" (backslash) to create an array of the URL split by the character that separates parts of the URI. 用“ /”（反斜杠）分隔路径变量，以创建一个URL数组，该数组由分隔URI部分的字符分隔。 The part you are looking for is at the end. 您正在寻找的部分在最后。

JavaScripts pop method makes it easy to pull the last array element. JavaScripts pop方法使提取最后一个数组元素变得容易。

JavaScripts replace method accepts strings and regular expressions. JavaScripts replace方法接受字符串和正则表达式。 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. 此处使用的一个“ /.html|.php|.htm/gi”告诉浏览器替换从pop方法产生的字符串的任何部分，即“ .html” OR（|）“ .php” OR（ |）“。htm”，其中包含0个空格的空字符串。

Instead of having to select through and array (newClass[0]), you can just set the string to your variable this way as well. 不必选择通过数组（newClass [0]），也可以通过这种方式将字符串设置为变量。

<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: 为了简化它，而不是设置变量，您可以只在jQuery的addClass方法中执行方法，如下所示：

<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. 在此选项中，我实现了一个Switch语句，在这种情况下，您可以为所需的每个页面设置自定义类，并使用“默认”选项，将其设置为可以处理任何与任何情况都不匹配的内容。

<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/). 在这里，如果用于获取页面名称的方法集返回为空，则用户位于站点的根目录（www.example.com/）。 So we run a simple if statement on it to see if it has a value. 因此，我们在其上运行了一个简单的if语句，以查看它是否具有值。 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>

从URL名称中删除扩展名，并向正文添加一个通用类

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-04-06 04:15:08

从URL名称中删除扩展名，并向正文添加一个通用类

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-04-06 04:15:08

解决方案1
0 已采纳 2018-04-06 04:15:08