从字符串中删除字符，忽略html标签

Question

I am using tinyMCE wysiwyg editor for textareas in one of my projects. I have been looking for a way to limit the characters entered by a user.

My requirements are:

• Do not let a user enter more than specified character limit. (so the method should be bound to keyDown / keyUp event).
• Make sure this works with copy / paste too (ie ctrl+v and right mouse click and paste ).
• On copy / paste the behavior should be --> strip the excess characters from the innerText and set the content to the stripped text but still keep the styles that were applied to the original content.

I have had a look at the maxchars plugin but it just does not serve the purpose especially when it comes to the copy / paste functionality. I tried implementing custom methods to achieve the above mentioned requirements.

What I have already achieved is as follows:

---

Prevent users from entering anymore characters once the character limit is reached.

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

Once bound to the keyDown or keyUp event this works fine and does not allow a user to enter anymore characters once the character limit is reached. The problem with this is that it does not support copy / paste so a user can paste as many chars as he wants.

Take care of copy / paste .

In order to implement the copy /paste functionality I thought it would be good to use the tinyMCE 's setContent method to update the content. so i updated the above to:

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

This works pretty well. The problem with this is that it does not apply the styles from the original content to the new content as new content is innerText object.

---

Is there a way I can strip out characters from the innerHTML instead of innerText and avoid stripping any HTML tags included in the string ??

So for example say I have the following string:

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

the length of the innerText for the above string is 55 characters and say the limit is 50 chars. I want to strip out the last 5 characters from the above string so that the result is:

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

If I do this using the above code (ie using innerText ) the result I get is This is a test. I have been testing this since mor This is a test. I have been testing this since mor . How can I get the above result that includes the html tags ?

Answer 1

You can use this function:

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