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!

If I get your point: you have some row in a table, for each row you want to generate an HTML list item, and each item should have an unique id (HTML attribute `id` ?), this id should not break your HTML and be a valid CSS selector. Why do you need a such thing, and why are you talking about valid CSS selector ? You can't write *static* CSS selector based on *dynamic* ids. — pomeh, May 16 '12 at 13:07
pomeh: I need to reference individual list items with jQuery, and it's that much more easier if when printing the list, I have id's set for each item. || Rick: That's... an embarrassingly simple yet awesome solution. — Emphram Stavanger, May 16 '12 at 13:16
I don't understand the part about "printing the list". Also, can you edit the database schema ? If so, you can add a column which could contains something like `md5( current title + date + random number )`, and the value is determined when the data is inserted in the database — pomeh, May 16 '12 at 13:18
look at my answer, you don't need to use the ID attribute at all, what do you think ? — pomeh, May 16 '12 at 13:36

optimiertes · Answer 1 · 2020-03-16T09:41:42.657

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

pomeh · Answer 2 · 2012-05-16T13:40:13.317

0

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

edited May 16 '12 at 13:40

answered May 16 '12 at 13:33

pomeh

4,742
4
23
44

is this `data-xxxx` and $(y).data(xxxx) is a built in jQuery functionality? And how cross browser is it if so? – Itay Moav -Malimovka May 16 '12 at 13:38
`data-*` attributes are defined in the HTML5 specification. However, you can use them even if your page doesn't use HTML5, they are recognized by all browsers. – pomeh May 16 '12 at 14:26
But what if I wanted to select a specific `li`? Wouldn't that require looping through the list checking each item for the specific `data-*` attribute, which means I might as well just forget the attribute, and check directly against the list content? – Emphram Stavanger May 16 '12 at 16:13
you want to select a specific li based on what ? Its `title` value ? Can you post a more detailed example of what you're trying to do ? Because depending on the final purpose, some solutions might or might not scale – pomeh May 17 '12 at 10:46
Well if each `li` has a unique ID value, then I can just do `$("#prefix_title")`. But if I store the unique stuff into a `data-*` or `title` or something, doesn't selecting that get slightly more difficult coding wise slash slow performance wise? – Emphram Stavanger May 22 '12 at 07:48
@EmphramStavanger it depends on what you want to do. Why do you want to selected a specific element ? In what circumstances ? – pomeh May 22 '12 at 16:38

Lucas Vall · Answer 3 · 2019-03-05T17:20:32.587

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.

Make sure string is a valid CSS ID name

3 Answers3