Question

我有一堆数据库记录（没有auto_increment ID或其他类似的东西）呈现为列表，而且我需要用独特的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

标题总是多种多样，足以避免冲突，并且绝不会包含任何非西方字符。

谢谢！

Answer 1

我需要一个类似的Deeplink Anchor解决方案。

发现这很有用：

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

Answer 2

您根本不需要使用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方法访问data- *值

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

Answer 3

查看W3 specs，id和类可以包含：

仅字符[a-zA-Z0-9]（...）加上连字符（-）和下划线（_）;他们不能以数字开头，也不能以连字符后跟数字

请注意，还接受其他一些字符（为简单起见，我将其省略）。所以我用这个：

// We must be careful not to replace into an invalid string,
// thus adding 'a' in some cases and doing a second replace.
string.replace(/(^-\d-|^\d|^-\d|^--)/,'a$1').replace(/[\W]/g, '-');

请注意，您可能会得到原本不同的相同字符串：如果对此有疑问，则必须依靠更高级的替换功能。

确保string是有效的CSS ID名称

3 个答案: