Make sure string is a valid CSS ID name - php

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

Answer 2

You don't need to use the HTML id attribute at all. You can use HTML5 data-* attribute to store user defined values. Here is an example:
<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>
Then, in you jQuery code, you can access the data-* values with the $.fn.data method
$(".my-awesome-list li").each(function(){
var realTitle = $(this).data('rowtitle');
});

Answer 3

Looking at the W3 specs, ids and classes can contain:
only the characters [a-zA-Z0-9] (...) plus the hyphen (-) and the
underscore (_); they cannot start with a digit, or a hyphen followed by a digit
Note that some other characters are accepted (that I omitted for simplicity). So I use this:
// 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, '-');
Note that you may end up with identical strings that were originally different: you would have to rely on a more advance replace function if you have issues with this.