如何创建文本区域字计数器？
[英]How to create a text area word counter?
问题描述
我创建了几个输入到 JavaScript 命令中以创建自定义句子。 用户输入或选择的任何内容都会添加到句子框架中。 当用户选择提交时，该句子将在文本区域中创建。 如何向我的应用程序添加一个功能来计算 textarea 中的单词数？ 我只想要文本区域右下角的一个小文本框，说明文本区域中有多少单词。
非常感谢你的帮助！
<!DOCTYPE html> <html> <head> <title>Hi</title> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css"> <style type="text/css"> table,td,th {margin-left: auto;margin-right: auto} .display {display: flex;align-items: center;justify-content: center;} p {text-align: center;} textarea {display: block;margin-left:auto;margin-right: auto;} .chosen-select {width:200px} </style> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script> <script type="text/javascript"> function sentence() { document.getElementById("s1").value = "";// reset document.getElementById("s1").style.display = "block"; document.getElementById("r1").style.display = "block"; if (document.getElementById("z1").value == "") { alert("Year, Make, and Model are needed"); document.getElementById("z1").focus(); } else { const input1 = document.getElementById("z1").value; var input3 = $('#z3').val(); console.log(input3); var input3Formatted = ""; if(input3.length==1){ // Only one value... input3Formatted = input3[0]; } if(input3.length==2){ // Two values... Just add and "and" input3Formatted = input3[0]+" and "+input3[1]; } if(input3.length>2){ // more than 2 values... for(i=0;i<input3.length-1;i++){ input3Formatted += input3[i]+", "; } input3Formatted += "and "+input3[input3.length-1]; } const input5 = "It has minor curb rash on the "+input3Formatted+"." const input7 = document.getElementById("z5").value; document.getElementById("s1").value = "This is my " +input1+ ". It is in good condition.The vehicle's rims have curb rash. "+input5+" The "+input1+"'s color is "+input7+"." } } function reset() { document.getElementById("s1").value = ""; } </script> <script type="text/javascript"> $(function() { $(".chosen-select").chosen({ disable_search_threshold: 4 }) }); </script> </head> <body> <table> <tr> <td> <input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100" > </td> <td> <select data-placeholder="Minor Curb Rash" name="minorrash" multiple class="chosen-select" id="z3"> <option value=""></option> <option value="front left rim">Front Left Rim</option> <option value="back left rim">Back Left Rim</option> <option value="front right rim">Front Right Rim</option> <option value="back right rim">Back Right Rim</option> </select> </td> <td> <input type="text" id="z5" placeholder="Color" name="name" maxlength="100"> </td> </tr> </table> <br> <div class="display"> <button onclick="sentence()"> Submit </button> </div> <hr> <br> <textarea rows="10" cols="100" id="s1"></textarea> <br> <div class="display"> <button onclick="reset()" id="r1">Reset</button> </div> </body> </html>
3 个解决方案
解决方案1
2 2018-07-19 03:46:16
我不知道这是否是您要尝试的，这就是我对您的问题的理解：
<script type="text/javascript">
var nameValidationInput = document.getElementById('s1');//here you search in your text area al the words
function useValue() {
var NameValue = nameValidationInput.value;
document.getElementById("demo").innerHTML = NameValue.split(" ").length // here you count the word separated by a space
}
</script>
<br>
<textarea rows="1" cols="5" id="demo"></textarea>// just to show the count in the text area
<br>
通过这种方式，该函数将计算每个空格分隔的单词（如果您想要更详细的内容，如果会更困难）
解决方案2
1 2018-07-19 02:48:17
好吧，最简单的方法是将 textarea 中的所有文本存储在一个数组中（由空格分隔）。 您可以使用.split来实现这一点。 完成后，只需获取数组的长度即可。 它将返回世界计数。 尝试这个。
var splitData = textarea.value.split(" ");
var wordCount = splitData.length;
解决方案3
1 2020-09-01 16:49:02
我将留下另一个版本的建议。 使用 length 是不够的，因为它会将每个空格计为一个单词，并且在开始时即使它为空也会计数 1 个单词。 我建议使用 trim() 和 filter 来防止这些错误，例如：
wordsArr = text.trim().split(" ")
wordsArr.filter(word => word !== "").length
如果没有 if 语句，当文本区域中只有 1 个单词时，如何将“单词”更改为单词？
[英]Without if statements how can I change "words" to word when there is only 1 word in the text area?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.