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

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

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

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

• Статья в а-листе
• W3Школы

Предположим, вы говорите о попытке автоматически заменить "и" умными кавычками: это не обязательно хорошая идея. Алгоритмы выбора правильного способа отображения цитат хрупки, и их легко обмануть. Существует общая формула, которую нужно делать с просмотром символа перед цитатой, который используется в таких программах, как 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'));

Чтобы основываться на ответе Кента: вы можете использовать теги 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 элементов, чтобы они выделялись. Это часть моей стратегии «на хуй, это достаточно хорошо» для IE6.