Умные цитаты с использованием JQuery

Question

Как с помощью jQuery включить живую вставку умные цитаты при редактировании текстовых полей?

Answer 1

Предполагая, что вы говорите о попытке автоматически заменить " и ' умными кавычками:это не обязательно хорошая идея.Алгоритмы выбора правильного пути обращения котировок хрупкие, и их легко обмануть.Существует общая формула просмотра символа перед кавычкой, которая используется в таких программах, как Office.Но они часто допускают ошибки, в результате чего текст получается хуже, чем если бы не старались.Иногда, конечно, вам вообще не нужны умные кавычки (особенно на таком сайте, где мы говорим о коде).

Если это необходимо для вашего личного удобства набора текста, вы можете попробовать установить раскладку клавиатуры, позволяющую вводить смарт-кавычки напрямую и явно.

Тем не менее, если вам нужно, вот код для начала...

<textarea id="foo" rows="6" cols="40"></textarea>

...

function AutoReplacer(element) {
    // List of replacement rules. Note currently with this simplistic code
    // replacements should be the same length as the original text.
    //
    replacements= [
        [' "', ' \u201C'],
        ['("', ' \u201C'],
        ['"', '\u201D']
    ];

    // Only attempt to use replacer behaviour if we can retain the cursor
    // position. Setting value by default moves the cursor to the end of the
    // input, which is too irritating.
    //
    if (getInputSelection(element)!==null) {
        element.onkeyup= function() {
            value= element.value;
            for (var i= 0; i<replacements.length; i++) {
                value= value.split(replacements[i][0]).join(replacements[i][1]);
            }
            if (value!=element.value) {
                var s= getInputSelection(element);
                element.value= value;
                setInputSelection(element, s);
            }
        };
    }
}

// Cross-browser (as much as possible anyway) cursor positioning
//
function getInputSelection(element) {
    if (element.selectionStart!==window.undefined) {
        return [element.selectionStart, element.selectionEnd];
    } else if (document.selection) {
        var BIG= 1000000;
        var range= document.selection.createRange();
        if (range.moveStart===window.undefined)
            return [0, 0];
        var start= -range.moveStart('character', -BIG);
        var end= -range.moveEnd('character', -BIG);
        return [start-1, end-1];
    } else return null;
}
function setInputSelection(element, s) {
    if (element.selectionStart!==window.undefined) {
        element.selectionStart= s[0];
        element.selectionEnd= s[1];
    } else if (document.selection) {
        var range= element.createTextRange();
        range.collapse(true);
        range.moveEnd('character', s[1]);
        range.moveStart('character', s[0]);
        range.select();
    }
}

new AutoReplacer(document.getElementById('foo'));

Answer 2

Один из вариантов — использовать малоизвестный элемент «q».

foo bar<q>quoted area</q>foo bar

тогда пользовательский агент сделает все возможное, чтобы создать цитаты в лучшем стиле.

• Статья в отдельном списке
• W3Школы

Answer 3

Основываясь на ответе Кента: вы можете использовать теги q, однако большинство браузеров по умолчанию используют только прямые кавычки, а IE не отображает никаких кавычек.

Это исправлено в IE7 + и других браузерах с помощью CSS. Вот что я положил в свои таблицы стилей:

q:before {
    content: "\201c";
}
q:after {
    content: "\201d";
}
q q:before {
    content: "\2018";
}
q q:after {
    content: "\2019";
}

Первый пакет предназначен для фигурных двойных кавычек, второй - для фигурных одинарных кавычек (если у вас есть вложенные теги q).

Это не работает в IE6. Мое обычное решение - установить цвет на элементы q, чтобы они выделялись. Часть моего & Этого, этого достаточно, & Quot; стратегия для IE6.