確保字符串是一個有效的CSS ID名稱

我有一堆數據庫記錄（沒有auto_increment ID或類似的東西）呈現爲一個列表，並且它證明我需要區分它們中的每一個獨特的id。確保字符串是一個有效的CSS ID名稱

我可以在循環中添加一個運行計數器並完成它，但不幸的是，這個ID需要在整個站點中交叉引用，但是該列表是有序或過濾的。

因此，我有一個主意，包括錄像標題爲id的一部分（用一個前綴，因此不會與佈局元素衝突）。

我怎樣才能以一種萬無一失的方式將一個字符串轉換爲一個id名稱，以便它永遠不會包含會破壞HTML或不能用作有效CSS選擇器的字符？

例如;

Title ==> prefix_title 
TPS Report 2010 ==> prefix_tps_report_2010 
Mike's "Proposal" ==> prefix_mikes_proposal 
#53: Míguèl ==> prefix_53_miguel

標題總是多樣的，以避免衝突，並永遠不會包含任何非西方字符。

謝謝！

來源

2012-05-16 Emphram Stavanger

如果我明白你的意思：你有一些行的表，對於你想要生成HTML列表項的每一行，每個項目應該有一個唯一的id（HTML屬性'id'？），這個id不應該破壞你的HTML並且是一個有效的CSS選擇器。爲什麼你需要這樣的事情，爲什麼你要談論有效的CSS選擇器？你不能寫基於* dynamic * id的* static * CSS選擇器。 – pomeh

爲什麼不使用MD5？ –

pomeh：我需要使用jQuery來引用單個列表項，並且如果打印列表時我更容易，我爲每個項目設置了id。 ||瑞克：這是一個令人尷尬的簡單但很棒的解決方案。 –

根本不需要使用HTML id屬性。您可以使用HTML5 data-* attribute來存儲用戶定義的值。下面是一個例子：

<ul class="my-awesome-list"> 
    <!-- PHP code, begin a for/while loop on rows --> 
    <li data-rowtitle="<?php echo json_encode($row["title"]); ?>"> 
     <?php echo $row["title"]; ?> 
    </li> 
    <!-- PHP loop end --> 
</ul>

然後，在你jQuery代碼，可以用$.fn.data方法

$(".my-awesome-list li").each(function(){ 
    var realTitle = $(this).data('rowtitle'); 
});

來源

2012-05-16 13:33:10 pomeh

是這個'data-xxxx'和$（y）.data（xxxx）是一個內置的jQuery功能嗎？ –

'data- *'屬性是在HTML5規範中定義的。但是，即使您的頁面未使用HTML5，也可以使用它們，它們可以被所有瀏覽器識別。 – pomeh

但是如果我想選擇一個特定的'li'呢？那不需要在列表中檢查每個項目的具體'data- *'屬性，這意味着我可能只是忘記了屬性，並直接檢查列表內容？ –

我需要深層鏈接錨類似的解決方案訪問數據 - *值。

發現這個有用：

function seoUrl($string) { 
    //Lower case everything 
    $string = strtolower($string); 
    //Make alphanumeric (removes all other characters) 
    $string = preg_replace("/[^a-z0-9_\s-]/", "", $string); 
    //Clean up multiple dashes or whitespaces 
    $string = preg_replace("/[\s-]+/", " ", $string); 
    //Convert whitespaces and underscore to dash 
    $string = preg_replace("/[\s_]/", "-", $string); 
    return $string; 
}

信用：https://stackoverflow.com/a/11330527/3010027

PS：WordPress的，用戶可以看這裏：https://codex.wordpress.org/Function_Reference/sanitize_title

來源

2014-05-07 12:14:58 optimiertes

確保字符串是一個有效的CSS ID名稱

回答

相關問題