Question

In my case I use jQuery and PHP. I can add data width jQuery and when I do it creates new div tags.

The problem I have is if I add “My åäö test” to a div class for example it looks like this:

<div class="My åäö test">

In fact, that’s three classes. I somehow need to sanitize it like the way WordPress does:

Sanitize Title

My result should be:

<div class="my-aao-test">

Any other suggestions how to better store data attached to divs or other elements are also welcome.

Answer 1

Why not use the same function that WordPress uses?
You could pass it via ajax to be sanitized and then returned.
Taken from the source:

function sanitize_title_with_dashes($title) {
    $title = strip_tags($title);
    // Preserve escaped octets.
    $title = preg_replace('|%([a-fA-F0-9][a-fA-F0-9])|', '---$1---', $title);
    // Remove percent signs that are not part of an octet.
    $title = str_replace('%', '', $title);
    // Restore octets.
    $title = preg_replace('|---([a-fA-F0-9][a-fA-F0-9])---|', '%$1', $title);

    if (seems_utf8($title)) {
        if (function_exists('mb_strtolower')) {
            $title = mb_strtolower($title, 'UTF-8');
        }
        $title = utf8_uri_encode($title, 200);
    }

    $title = strtolower($title);
    $title = preg_replace('/&.+?;/', '', $title); // kill entities
    $title = str_replace('.', '-', $title);
    $title = preg_replace('/[^%a-z0-9 _-]/', '', $title);
    $title = preg_replace('/\s+/', '-', $title);
    $title = preg_replace('|-+|', '-', $title);
    $title = trim($title, '-');

    return $title;
}