Javascript 忽略html标记从字符串中删除字符

我正在我的一个项目中为文本区域使用

tinyMCE

wysiwyg编辑器。我一直在寻找一种方法来限制用户输入的字符

我的要求是：

• 不允许用户输入超过指定字符限制的字符。（因此该方法应该绑定到keyDown/keydup事件）
• 确保这也适用于复制/粘贴（即

  ctrl+v

  和右键） 单击鼠标并粘贴

  ）

• 复制/粘贴时，行为应为-->从

  内部文本中去除多余字符，并将内容设置为去除的文本，但仍保留应用于原始内容的
  样式

我已经看过这个插件了，但它并没有达到这个目的，尤其是在

复制/粘贴功能方面。我尝试实现定制方法来实现上述需求

我已经取得的成就如下：


一旦达到字符限制，禁止用户输入更多字符。

function preventExcessChars(editor, event) {
    var body = editor.getBody(),
        limit = editor.settings.charLimit,
        text = body.innerText || body.textContent,
        length = text.length;

    if (length >= limit && isCharacterKeyPress(event)) {
        event.preventDefault();
        event.stopImmediatePropagation();
        return false;
    }   
}

一旦绑定到
keyDown
或
keydup
事件，此功能正常工作，一旦达到字符限制，就不允许用户输入更多字符。问题是它不支持
复制/粘贴
，因此用户可以粘贴任意数量的字符

注意
复制
/
粘贴

function preventExcessChars(editor, event) {
    var body = editor.getBody(),
        limit = editor.settings.charLimit,
        text = body.innerText || body.textContent,
        length = text.length;

    if (length >= limit && isCharacterKeyPress(event)) {
        event.preventDefault();
        event.stopImmediatePropagation();
        return false;
    }   
}

为了实现
copy/paste
功能，我认为最好使用
tinyMCE
的
setContent
方法来更新内容。因此，我将上述内容更新为：

function preventExcessChars(editor, event) {
    var body = editor.getBody(),
        limit = editor.settings.charLimit,
        text = body.innerText || body.textContent,
        length = text.length;

    if (length >= limit && isCharacterKeyPress(event)) {
        // update the content and use setContent to update the text area
        var new_content = text.substr(0, limit);
        editor.setContent(new_content);
        event.preventDefault();
        event.stopImmediatePropagation();
        return false;
    }   
}

这很有效。问题在于，它不会将原始内容中的样式应用于新内容，因为新内容是
innerText
对象


是否有一种方法可以从
innerHTML
而不是
innerText
中删除字符，并避免删除字符串中包含的任何HTML标记

例如，假设我有以下字符串：

 "<p>This is a <b>test</b>.</p><p>I have been <i>testing</i> this since morning.</p>";

如果使用上述代码（即使用
innerText
）执行此操作，则得到的结果是
这是一个测试。我从mor开始就一直在测试这个。如何获得包含html标记的上述结果？
您可以使用此功能：

function maxChars(str, max) {
  var tags = 0,
      sQuotes = 0,
      dQuotes = 0,
      char,
      count = 0,
      result = [];
  for (var i = 0, len = str.length; i < len; ++i) {
    char = str.charAt(i);
    switch(char) {
      case '<':
        if (!sQuotes && !dQuotes) {
          ++tags;
          result.push(char);
          continue;
        }
        break;
      case '>':
        if (!sQuotes && !dQuotes) {
          --tags;
          result.push(char);
          continue;
        }
        break;
      case "'":
        if (tags && !dQuotes)
          sQuotes = !sQuotes;
        break;
      case '"':
        if (tags && !sQuotes)
          dQuotes = !dQuotes;
        break;
    }
    if (tags) {
      result.push(char);
    } else {
      if (++count < max)
        result.push(char);
    }
  }
  return result.join('');
};

// Example
var text = "<p>This is a <b>test</b>.</p><p>I have been <i>testing</i> this since morning.</p>";
maxChars(text, 50);
// "<p>This is a <b>test</b>.</p><p>I have been <i>testing</i> this since mor</p>"

函数maxChars（str，max）{
变量标签=0，
sQuotes=0，
dQuotes=0，
烧焦
计数=0，
结果=[]；
对于（变量i=0，len=str.length；i我从早上就开始测试了。
”；
maxChars（文本，50）；
//“这是一项测试。
我从早上就开始测试了。”
只需为自己构建一个小DOM树，这样你就可以修剪文本节点。这不是对你问题的直接回答，但你是否考虑过只使用键盘上更新的字符计数？有点像我现在输入的注释控件。这种方法更好，因为它有两个功能：首先，用户可以看到第二，它允许用户最初超出字符限制，然后返回并编辑/修剪它，以使其适合。你不应该阻止用户输入更多字符，你只需要阻止他们提交。作为记录，我在写此评论时就是这么做的。