從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