javascript - tag - editable true html

REGEX-Destaca la parte de más de 19 caracteres

Question

Hola,

Tengo un texto dentro de div[contenteditable="true"] y debo resaltar ( span.tooLong ) parte que supera el límite de 19 caracteres. El contenido en div puede tener etiquetas HTML o entidades y se deben ignorar al contar hasta 19.

Twitter tiene una forma similar de resaltar un tweet demasiado largo:

Ejemplos:

• This is text ⇨ This is text
• This is just too long text ⇨ This is just too lo<span class="tooLong">ng text</span>
• This <b>text</b> has been <i>formatted</i> with HTML ⇨ This <b>text</b> has been <span class="tooLong"><i>formatted</i> with HTML</span>

¿Cómo puedo implementar esto en JavaScript?

(Quiero usar expresiones regulares tanto como sea posible)

Answer 1

De acuerdo ... aquí hay un código que creo que funcionará para ti, o al menos comenzar.

Básicamente, la expresión regular que necesita para encontrar todo en 19 caracteres es esta:

var extra = content.match(/.{19}(.*)/)[1];

Entonces, armé un documento de muestra de cómo podrías usar esto.

Eche un vistazo a la DEMO .

Aquí está el Javascript que estoy usando (estoy usando jQuery para los localizadores aquí, pero esto puede modificarse fácilmente para usar Javascript directo ... prefiero jQuery para cosas como esta) ...

$(document).ready(function() {
$(''#myDiv'').keyup(function() {
var content = $(''#myDiv'').html();
var extra = content.match(/.{19}(.*)/)[1];
$(''#extra'').html(extra);
var newContent = content.replace(extra, "<span class=''highlight''>" + extra + "</span>");
$(''#sample'').html(newContent);
});
});

Básicamente, tengo tres configuraciones de DIV. Uno para que ingreses tu texto. Una para mostrar qué caracteres están por encima del límite de 19 caracteres. Y uno para mostrar cómo puede resaltar los caracteres adicionales.

Mi ejemplo de código no busca las etiquetas html, ya que hay demasiadas para tratar de manejar ... pero debería darle un excelente punto de partida sobre cómo podría funcionar.

NOTA : puede ver el código completo que escribí usando este enlace: http://jsbin.com/OnAxULu/1/edit

Answer 2

Aquí hay una respuesta que usa mi biblioteca Rangy. Utiliza los módulos Class Applier y TextRange para aplicar estilos en los rangos de caracteres dentro del contenido editable mientras se preserva la selección. También utiliza un intervalo de eliminación de rebotes configurable para evitar la lentitud en el rendimiento del editor. Además, debería funcionar en viejo IE.

Demostración: http://jsfiddle.net/timdown/G4jn7/2/

Código de muestra:

var characterLimit = 40;
var debounceInterval = 200;
function highlightExcessCharacters() {
// Bookmark selection so we can restore it later
var sel = rangy.getSelection();
var savedSel = sel.saveCharacterRanges(editor);
// Remove previous highlight
var range = rangy.createRange();
range.selectNodeContents(editor);
classApplier.undoToRange(range);
// Store the total number of characters
var editorCharCount = range.text().length;
// Create a range selecting the excess characters
range.selectCharacters(editor, characterLimit, editorCharCount);
// Highlight the excess
classApplier.applyToRange(range);
// Restore the selection
sel.restoreCharacterRanges(editor, savedSel);
}
var handleEditorChangeEvent = (function() {
var timer;
function debouncer() {
if (timer) {
timer = null;
}
highlightExcessCharacters();
}
return function() {
if (timer) {
window.clearTimeout(timer);
}
timer = window.setTimeout(debouncer, debounceInterval);
};
})();
function listen(target, eventName, listener) {
if (target.addEventListener) {
target.addEventListener(eventName, listener, false);
} else if (target.attachEvent) {
target.attachEvent("on" + eventName, listener);
}
}
rangy.init();
var editor = document.getElementById("editor");
var classApplier = rangy.createClassApplier("overrun");
// Set up debounced event handlers
var editEvents = ["input", "keydown", "keypress", "keyup",
"cut", "copy", "paste"];
for (var i = 0, eventName; eventName = editEvents[i++]; ) {
listen(editor, eventName, handleEditorChangeEvent);
}