REGEX - 突出超过19个字符的部分

Question

嗨,

我里面有一些文字div[contenteditable="true"],我应该突出显示span.tooLong超过19个字符限制的部分.内容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