Javascript 多个文本区域的单词和字符总数

当前，以下代码跟踪id为

text

的textarea的字数和字符数

但是，我希望它能够对多个文本区域的结果进行统计。我怎样才能做到这一点

计数器=函数（）{
var值=$（'#text'）.val（）；
如果（value.length==0）{
$（'#wordCount'）.html（0）；
$（'#totalChars'）.html（0）；
$（'#charCount'）.html（0）；
$（'#charCountNoSpace'）.html（0）；
返回；
}
var regex=/\s+/gi；
var wordCount=value.trim（）.replace（regex.）.split（“”）.length；
var totalChars=value.length；
var charCount=value.trim（）.length；
var charCountNoSpace=value.replace（regex.）.length；
$（'#wordCount'）.html（wordCount）；
$（'#totalChars'）.html（totalChars）；
$（'#charCount'）.html（charCount）；
$（'#charCountNoSpace'）.html（charCountNoSpace）；
};
$（文档）.ready（函数（）{
$（“#计数”）。单击（计数器）；
$（'#text'）。更改（计数器）；
$（'#text'）。向下键（计数器）；
$（'#text'）。按键（计数器）；
$（'#text'）.keyup（计数器）；
$（'#text'）.blur（计数器）；
$（'#text'）。焦点（计数器）；
});

单词：0
字符总数（包括尾迹）：0
字符（不包括尾迹）：0
字符（不包括所有空格）：0
您需要将ID更改为class，以便将插件连接到多个元素。将代码转换为插件。请尝试以下方法：


计数器=函数（）{
if（$（this）.next（'div.result'）.length）{
$（this.next（'div.result'）.remove（）；
}
var output='Words:0
字符总数（包括尾迹）：0
字符（不包括尾迹）：0
字符（不包括所有空格）：0'；
$（此）.after（输出）；
var值=$（this.val（）；
如果（value.length==0）{
$（this.next（'div.result'）.find（'.wordCount'）.html（0）；
$（this.next（'div.result'）.find（'.totalChars'）.html（0）；
$（this.next（'div.result'）.find（'.charCount'）.html（0）；
$（this.next（'div.result'）.find（'.charCountNoSpace'）.html（0）；
返回；
}
var regex=/\s+/gi；
var wordCount=value.trim（）.replace（regex.）.split（“”）.length；
var totalChars=value.length；
var charCount=value.trim（）.length；
var charCountNoSpace=value.replace（regex.）.length；
$（this.next（'div.result'）.find（'.wordCount'）.html（wordCount）；
$（this.next（'div.result'）.find（'.totalChars'）.html（totalChars）；
$（this.next（'div.result'）.find（'.charCount'）.html（charCount）；
$（this.next（'div.result'）.find（'.charCountNoSpace'）.html（charCountNoSpace）；
};
$（文档）.ready（函数（）{
$（“#计数”）。单击（计数器）；
$（'.string示例，.regex示例'）。on（'change keyup focusout blur'，counter）；
});

在文本区域内突出显示
.hwt集装箱{
背景色：#f8f9fa；
}
.hwt内容{
宽度：760px；
高度：100px；
填充：20px；
边框：1px实心#adb5bd；
颜色：继承；
字体：18px/25px“Droid无单声道”，无衬线；
}
.hwt输入：焦点{
轮廓颜色：#495057；
}
.hwt内容标记{
边界半径：3px；
背景色：#d0bff；
}
.hwt内容标记.red{
背景色：#ffc9c9；
}
.hwt内容标记.blue{
背景色：#a3daff；
}
.hwt内容标记。黄色{
背景色：#ffec99；
}
* {
框大小：边框框；
}
身体{
最大宽度：800px；
利润率：40px自动；
填充：0 20px；
字体：18px/1.4“开放式Sans”，无衬线；
颜色：#495057；
背景色：#f1f3f5；
}
a{
显示：内联块；
边缘底部：5px；
填充：10px 30px；
边界半径：5px；
颜色：#f8f9fa；
背景色：#495057；
文字装饰：无；
}
部分{
边缘顶部：60像素；
}
代码{
填充：0 5px；
字体系列：“Droid Sans Mono”，无衬线；
字体大小：16px；
背景色：#dee2e6；
}
剧本{
显示：块；
边缘顶部：10px；
左侧填充：15px；
左边框：5px实心#adb5bd；
背景色：#e9ecef；
空白：预包装；
字体：14px/1.5“Droid无单声道”，无衬线；
}
在文本区域内突出显示
一些使用插件的演示和代码片段。编辑文本区域以查看实时突出显示。查看页面源代码以查看CSS



一串
请注意，这是不区分大小写的

土豆土豆。
$（'.string示例'）.highlightWithinTextarea({
推荐理由：“土豆”
});
正则表达式
如果需要，请不要忘记
g
（全部查找）和
i
（不区分大小写）标志

狗，猫，鸡，鹅。狗，猫，鸡，鹅。
$（'.regex示例'）.highlightWithinTextarea({
亮点：/dogs？| cats？| g（oo | ee）se/gi
});
两个数字的数组（范围）
正好由两个数字组成的数组被视为一个范围。高亮显示从第一个字符索引（包含）开始，到第二个字符索引（独占）结束

abcdefgh
$（'.range示例'）.highlightWithinTextarea({
亮点：[2,6]
});
一系列其他事情
您可以使用此处提到的任何类型，使用数组高亮显示多个对象

苹果西瓜香蕉橙芒果
$（'.array示例'）.highlightWithinTextarea({
亮点：[
“橙色”，
/ba（na）*/gi[0,5]
]
});
作用
您可以将函数用于自定义逻辑。它可以返回这里提到的任何类型。返回任何错误（
false
，
未定义的
，等等）以指示没有突出显示。为方便起见，提供了当前文本区域输入

星期一、星期二、星期三、星期四、星期五、星期六：）--去掉微笑。。
$(textarea).each(function(){
    console.log($(this).id);
});