Cotizaciones inteligentes usando JQuery

Question

Usando jQuery, ¿cómo puedo habilitar la inserción en vivo de comillas inteligentes mientras edito cuadros de texto ?

Answer 1

Suponiendo que está hablando de intentar reemplazar " y 'con comillas inteligentes automáticamente: no es necesariamente una buena idea. Los algoritmos para elegir la forma correcta de enfrentar las comillas son frágiles y pueden ser fácilmente engañados. Hay una fórmula común que ver con mirar el personaje antes de la cita, que se utiliza en programas como Office. Pero a menudo cometen errores, dejando el texto peor que si uno no lo hubiera intentado. A veces, por supuesto, no desea citas inteligentes (especialmente en un sitio como este donde estamos hablando de código).

Si es por su propia conveniencia de escritura personal, puede intentar instalar un diseño de teclado que permita que las citas inteligentes se escriban directa y explícitamente.

Dicho esto, si es necesario, aquí hay un código para comenzar ...

<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

Una opción es usar el elemento poco conocido de 'q'.

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

entonces el agente de usuario hará todo lo posible para crear las mejores citas de estilo.

• Artículo sobre una lista aparte
• W3Schools

Answer 3

Para construir sobre la respuesta de Kent: puede usar las etiquetas q, sin embargo, la mayoría de los navegadores solo usan comillas rectas por defecto, y IE no muestra ninguna comilla.

Esto se soluciona en IE7 + y otros navegadores mediante CSS. Esto es lo que puse en mis hojas de estilo:

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

El primer lote es para comillas dobles rizadas, el segundo es para comillas simples rizadas (para cuando haya anidado etiquetas q).

Esto no funciona en IE6. Mi solución normal es establecer un color en los elementos q, para que se destaquen. Parte de mi '' f * ck it, eso es lo suficientemente bueno '' estrategia para IE6.