jquery - 如何计算包含标签的文本区域中的字符数

Question

我希望能够计算文本区域中的字符数，并在字符用完时向客户报告。我已经做得很好，但现在我需要添加更多功能，但我不知道从哪里开始。

基本上，除了普通字符之外，客户还可以通过按钮将标签添加到文本框(这已经完成)。 tagg 按以下格式插入到内容中:

一些随机内容[标签]，内容更多

我希望能够测量字符数，并且无论 [tag] 出现在哪里，都将 20 个字符添加到总数中。它还可以在删除[标签]或[标签]的一部分时删除附加字符。

我有一个基本版本，但它无法确定标签何时被删除。

function countCharacters(totalTags){

    var new_length = $('#t_text').val().length;
    if (new_length < 10){
        totalTags=0;    
    }
    additionalcharacters = totalTags*10;
    var new_length = $("#t_text").val().length+additionalcharacters;
    if(new_length <= 154) {
        $('#charlimitinfo').removeClass('red');
        $('.cost').html('1');
    } else if(new_length >= 154 && new_length <= 308) {
        $('#charlimitinfo').removeClass('red');
        $('.cost').html('2');
    } else if(new_length >= 308 && new_length <= 462) {
        $('#charlimitinfo').removeClass('red');
        $('.cost').html('3');
    } else if(new_length >= 462 && new_length <= 606) {
        $('#charlimitinfo').removeClass('red');
        $('.cost').html('4');
    } else if(new_length >= 606 && new_length <= 616) {
        $('#charlimitinfo').addClass('red');
        $('.cost').html('5');
    }         
    else {
        if(new_length >= 616){
            $('#t_text').next('#charlimitinfo').addClass('red');
            $('#charlimitinfo').html('You have reached 616 characters!');
            this.value = this.value.substring(0, 616);
            return false;
        }
        else{
            $('#charlimitinfo').removeClass('red');
            $('#charlimitinfo').html((616 - new_length) +'<span>characters left</span>');
            return true;
        }
    }
    $('#charlimitinfo').html(new_length);  
}

t_text = 文本区域TotalTags = 每次单击标签按钮并插入标签时的计数器。

希望有人能提供帮助，因为这让我的瑞典人很烦恼。

干杯

戴夫

Answer 1

有趣的问题。我可能会使用正则表达式来处理它，而不是使用标签计数器:

function countCharacters()
{
    var text = $('#t_text').val(),
        tags = ['tag', 'tag2'], // An array of your tags
        i,
        matches,
        regex,
        extraCharacters = 0,
        totalCharacters;

    for (i = 0; i < tags.length; i++)
    {
        regex = new RegExp('\\[' + tags[i] + '\\]', 'g');
        matches = text.match(regex) || [];
        extraCharacters += (matches.length * 20) - (matches.length * (tags[i].length + 2));
    }

    totalCharacters = text.length + extraCharacters;

    // Do your if statements/style changes/etc. here
}

这做出了几个假设:

• 每个标签值 20 个字符(如您的帖子中所述，尽管代码显示为 10 个字符)
• 标签被替换为 20 个字符
• 这些标签实际上就在您的文本中(我不明白为什么它们不会)

此解决方案的一大优点是，如果有人手动放入标签，它会捕获它，而您的标签计数器则不会。

编辑

代码未经测试，正则表达式可能是贪婪的(首先匹配最长的可能匹配)。现在测试。

编辑2

好吧，代码有严重错误。弄清楚它是什么。

编辑3

事实证明，在用字符串创建正则表达式时，必须对特殊字符进行双重转义: new RegExp('\\[' + tag[i] + '\\]', 'g') - 一次用于字符串，一次用于正则表达式。另外，如果没有找到匹配项，string.matches(regex) 返回 null，因此我们将其与空数组进行“或”运算，并在计算中使用 matches 的长度.

伙计。我在编码方面输了。 :-D