Make sure string is a valid CSS ID name

Question

I have a bunch of database records (without auto_increment IDs or anything else like that) rendered as a list, and it came to pass that I need to differentiate each of them with a unique id.

I could just add a running counter into the loop and be done with it, but unfortunately this ID needs to be cross-referenceable throughout the site, however the list is ordered or filtered.

Therefore I got an idea to include the record title as a part of the id (with a prefix so it doesn't clash with layout elements).

How could I transform a string into an id name in a foolproof way so that it never contains characters that would break the HTML or not work as valid CSS selectors?

For example;

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

The titles are always diverse enough to avoid conflicts, and will never contain any non-western characters.

Thanks!

Answer 1

I needed a similar solution for Deeplink Anchors.

Found this useful:

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

Credit: https://stackoverflow.com/a/11330527/3010027

PS: Wordpress-Users have a look here: https://codex.wordpress.org/Function_Reference/sanitize_title