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

Question

我怎样才能从URL中删除.html和添加一个普通类POR例如inners

这是我的代码：

$(document).ready(function() {
 var path = window.location.pathname;
 var newClass = path.match(/[^\/]*[^\d\/][^\/]*/);
 $('body').addClass(newClass[0]);
});

实际代码的结果是： <body class="lastname.html">

应该是<body class="inners lastname">

-编辑- 。

这是代码：

<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");
});

见所附图片

Answer 1

一旦进入document.ready函数，就可以通过三个步骤完成此操作。

您可以使用本机JavaScript方法来解析单行设置类所需的URL片段。

用“ /”（反斜杠）分隔路径变量，以创建一个URL数组，该数组由分隔URI部分的字符分隔。 您正在寻找的部分在最后。

JavaScripts pop方法使提取最后一个数组元素变得容易。

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

不必选择通过数组（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>

编辑：

为了简化它，而不是设置变量，您可以只在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>

编辑：

针对这些评论，我提供了两个解决方案：

这增加了一个三元运算符，您可以在其中单行设置特定的页面名称，它将只检查它们并在变量中设置类名称。

<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>

在此选项中，我实现了一个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>

编辑：

至于评论中的进一步讨论，请尝试使用此方法。

在这里，如果用于获取页面名称的方法集返回为空，则用户位于站点的根目录（www.example.com/）。 因此，我们在其上运行了一个简单的if语句，以查看它是否具有值。 如果确实有值，则我们将页面名称和其他“内部”类添加到正文中。

<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