Wu Yudong's Blog

今天的项目中实现了一个小功能，记录一下，如题所示

因为是实时的，这里采取的是对键盘的监听，字符数量的统计

$(document).on('keyup', function(event) {
    var markdownText = window.editor.getHTML().toString();
    var chineseCount = 0;
    var englishCount = 0;
    // 使用正则表达式匹配汉字
    const chineseRegex = /[\u4e00-\u9fa5]/g;
    // 使用正则表达式匹配英文字母
    const englishRegex = /[a-zA-Z]/g;


    var lines = $('.CodeMirror-code').find('pre').length;
    var pattern = new RegExp("<([^>]*)>");
    //var word = (markdownText.match(regex) || []).length;
    while(pattern.test(markdownText)){
        markdownText = markdownText.replace(pattern, '');
    }
    chineseCount = (markdownText.match(chineseRegex) || []).length;
    englishCount = (markdownText.match(englishRegex) || []).length;
    var realCount = chineseCount + englishCount;
    //console.log(markdownText);
    $('#char-count').text(markdownText.length);
    $('#line-count').text(lines);
    $('#real-count').text(realCount);
});

解释一下代码：通过editormd提供的函数获取正文的字符串，这里还是含有标签的，通过正则过滤掉没用的字符，对于行数的实时统计，这里基于editormd的特点，每一行都会在标签<pre></pre>中包着，所以只需要统计pre标签的数量即为所求