Автоматическое добавление якорей к заголовкам

<script src="jquery/jquery-2.2.0.min.js"></script>

<script src="anchorify/transliterate.js"></script>

<script>
    var anchorify_lang = {
        permalink: '{% trans 'Permalink to this headline' %}'  <!-- Используйте свой способ перевода слов. В Django используется {% trans 'Permalink to this headline' %} -->
    };
</script>
<script src="anchorify/anchorify.js"></script>
<link rel="stylesheet" href="anchorify/anchorify.css">


<!-- 1. Добавление якоря к заголовкам транслитом -->
<h2>Мой заголовок</h2>
<p>Произвольный текст</p>

<!-- 2. Добавление ссылки на якорь к заголовкам с id -->
<h2 id="my-title-2">Мой заголовок 2</h2>
<p>Произвольный текст</p>

<!-- 3. Добавление ссылки на якорь к заголовкам по указанному id, который не содержится в заголовках -->
<div class="anchor_wr" id="my-title-3">
    <img src="my_pic.jpg">Вспомогательный текст</img>
    <h2>Мой заголовок</h2>
    <p>Произвольный текст</p>
</div>

<!-- 4. Добавление якоря к заголовкам по указанному data-anchor -->
<div id="my-title-4">
    <p>Вспомогательный текст</p>
    <h2 data-anchor="my-title-4">Мой заголовок</h2>
    <p>Произвольный текст</p>
</div>

<!-- 5. Не добавлять ссылку на якорь при использовании класса .no_anchor -->
<div class="no_anchor">
    <h2>Мой заголовок 1</h2>
    <p>Произвольный текст</p>
</div>

<h2 class="no_anchor">Мой заголовок 2</h2>

var ALPHABET_AND_DIGITS = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

function transliterate(s, is_slug, valid_characters, use_dot) {

    function check_string(checked_string) {
        for(var i=0; i<checked_string.length; i++) {
            if (valid_characters.indexOf(checked_string[i]) == -1)
                return false
        }

        return true
    }

    if (is_slug == undefined) is_slug = false;
    if (valid_characters == undefined) valid_characters = null;
    if (use_dot == undefined) use_dot = false;

    if (!valid_characters){
        valid_characters = ALPHABET_AND_DIGITS + '- ';
        if (!is_slug) valid_characters += '\\/._ ';

        if (use_dot && !('.' in valid_characters)) valid_characters += '.'
    }

    var capital_letters = {
            'А': 'A', 'Б': 'B', 'В': 'V', 'Г': 'G', 'Д': 'D', 'Е': 'E', 'Ё': 'E', 'Ж': 'Zh', 'З': 'Z', 'И': 'I', 'Й': 'Y',
            'К': 'K', 'Л': 'L', 'М': 'M', 'Н': 'N', 'О': 'O', 'П': 'P', 'Р': 'R', 'С': 'S', 'Т': 'T', 'У': 'U', 'Ф': 'F',
            'Х': 'H', 'Ц': 'Ts', 'Ч': 'Ch', 'Ш': 'Sh', 'Щ': 'Sch', 'Ъ': '', 'Ы': 'Y', 'Ь': '', 'Э': 'E', 'Ю': 'Yu',
            'Я': 'Ya', ' ': is_slug ? '-' : '_'
        },

        lower_case_letters = {
            'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'e', 'ж': 'zh', 'з': 'z', 'и': 'i', 'й': 'y',
            'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n', 'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 'ф': 'f',
            'х': 'h', 'ц': 'ts', 'ч': 'ch', 'ш': 'sh', 'щ': 'sch', 'ъ': '', 'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu', 'я': 'ya'
        },

        res = '', char = '';

    s = s.toString();
    
    for(var i=0; i<s.length; i++) {
        char = s[i].replace(/\s/g, ' ');
        if (char in lower_case_letters) {
            char = lower_case_letters[char]
        } else if (char in capital_letters){
            char = capital_letters[char];
            if (s.length > i + 1) {
                if (!(s[i + 1] in lower_case_letters)) char = char.toUpperCase()
            }
            else char = char.toUpperCase()
        }

        if (check_string(char)) {
            if (is_slug) char = char.toLowerCase();
            res += char
        }
    }

    return res
}

$.each($('h2, h3, h4'), function () {

    if (!$(this).hasClass('no_anchor') && $(this).parents('.no_anchor').length === 0){

        if (!$(this).attr('id') && !$(this).data('anchor') && $(this).parents('.anchor_wr').length === 0) $(this).attr({'id': transliterate($(this)[0].innerText, true)});  // проверяем, нужно ли добавлять к заголовку id

        $(this).hover(function () {
            var $anchor = $(this).find('.anchor');

            // при первом наведении мышкой на заголовок ссылки пока нет, поэтому её нужно добавить
            if ($anchor.length === 0){
                var link = $(this).data('anchor') || $(this).attr('id');  // пытаемся получить либо id заголовка, либо значение атрибута data-anchor

                // если ссылка не определена, пытаемся найти родительский элемент с классом .anchor_wr
                if (!link) {
                    var $anchor_wr = $(this).parents('.anchor_wr');
                    if ($anchor_wr.length > 0) link = $anchor_wr.attr('id');
                }

                // если ссылка определена, можно добавить её в заголовок
                if (link) {
                    var parts = $(this).text().split(' ');  // возвращаем массив слов заголовка
                    if (parts) {
                        var last_word = parts.pop();  // присваиваем переменной последнее слово из массива слов, удаляя его из массива parts
                        $(this).html(parts.join(' ') + ' <span style="position: relative;">' + last_word + '</span>');  // оставшиеся элементы массива соединяем пробелом и добавляем последнее слово, обёрнутое тегом span
                        $(this).find('span').append('<a class="anchor" href="#'+ link +'" title="'+anchorify_lang.permalink+'">¶</a>');  // добавляем ссылку в тег span
                    }
                }
            } else {  // при повторном наведении просто отображаем ссылку
                $anchor.css({'display': 'inline-block'});
            }
        }, function () {
            // После отведения мышки от заголовка ссылку просто скрываем (а не удаляем, чтобы заново её не создавать)
            var $anchor = $(this).find('.anchor');
            if ($anchor.length > 0) $anchor.css({'display': 'none'});
        });
    }
});

.anchor {text-decoration: none;padding-left: 12px;font-size: .75em;position: absolute;line-height: initial;}

@media (max-width: 767px) {
    .anchor {padding-left: 3px;}
}