正则表达式 - 突出显示超过 19 个字符的部分

Question

嗨，

我在div[contenteditable="true"] 中有一些文本，我应该突出显示超过 19 个字符限制的 (span.tooLong) 部分。 div 中的内容可能包含 HTML 标记或实体，当数到 19 时应忽略这些标记或实体。

Twitter 也有类似的方式来突出显示过长的推文：

示例：

• 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>

如何在 JavaScript 中实现这一点？

（我想尽量使用正则表达式）

Answer 1

好的...这里有一些我认为对你有用的代码，或者至少让你开始。

基本上，查找超过 19 个字符所需的正则表达式是这样的：

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

所以，我整理了一份示例文档，说明您可以如何使用它。

看看DEMO。

这是我正在使用的 Javascript（我在这里使用 jQuery 作为定位器，但这可以很容易地修改为直接使用 Javascript...我只是更喜欢 jQuery 来处理这样的东西）...

$(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);
  });
});

基本上，我设置了三个 DIV。一个供您输入文本。一显示哪些字符超过了 19 个字符的限制。还有一个展示如何突出显示多余的字符。

我的代码示例不检查 html 标签，因为有太多要尝试和处理的标签……但应该为您提供一个很好的起点，了解它是如何工作的。

注意：您可以使用此链接查看我编写的完整代码：http://jsbin.com/OnAxULu/1/edit

Answer 2

这是一个使用我的 Rangy 库的答案。它使用Class Applier 和TextRange 模块将样式应用于可编辑内容中的字符范围，同时保留选择。它还使用可配置的debounce 间隔来防止编辑器性能迟缓。此外，它应该适用于旧 IE。

演示：http://jsfiddle.net/timdown/G4jn7/2/

示例代码：

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);
}