Javascript simple word counter - javascript

I am trying to make a simple word counter for a textarea element in Javascript. So far I have tried many methods but everyone fails in something. I searched the web but I only found solutions that use functions or JS commands and syntax that I still don't know. The goal is to count the words in a textarea that contains a maximum of 140 characters. The text can also be on more than one line so I have to consider the new line symbol.
Till now I wrote this:
for (let i = 0; i < text.length; i++) {
if (text[i]==' ' && (text[i-1]!==' ' && text[i-1]!=='\n')) {
wc++;
}
else if(text[i]=='\n' && text[i-1]!==' '){
wc++;
}
}
It kind of works but it counts only if after the word I press SPACE. Is there any way to start counting from when the user types just one letter?
EDIT:
I have already tried the .split(" ") method but it doesn't work with the ENTER/RETURN key. My goal is to start counting as soon as the user types a letter.

You can use split along with a regex for whitespace
let words = text.split(/\W/);
wc = words.length;
split breaks your string into an array, it creates a new entry to the array everytime it finds the expression you pass to it.
The regex /\W/ gets whitespaces (' ' and '\n')
So this way it would create an array with every word separated, and then you just need to check the length of the array

Added replace all multiple spaces with single space. Also added check if entered a new line.
document.getElementById("inputField").addEventListener("input", function(e) {
// Get the input text value
var text = this.value;
//replace all multiple spaces with single space
text = text.replace(/\s\s+/g, " ");
// Initialize the word counter
var wc = 0;
// Loop through the text
// and count spaces in it
for (let i = 0; i < text.length; i++) {
if (text[i]==' ' && (text[i-1]!==' ' && text[i-1]!=='\n')) {
wc++;
}
else if(text[i]=='\n' && text[i-1]!==' '){
wc++;
}
}
// Display it as output
document.getElementById("show").innerHTML = wc;
})
<textarea id="inputField" rows=10 cols="60">
</textarea>
<br><br>
<p> Word Count:
<span id="show">0</span>
</p>

Related

How to define a line break in extendscript for Adobe Indesign

I am using extendscript to build some invoices from downloaded plaintext emails (.txt)
At points in the file there are lines of text that look like "Order Number: 123456" and then the line ends. I have a script made from parts I found on this site that finds the end of "Order Number:" in order to get a starting position of a substring. I want to use where the return key was hit to go to the next line as the second index number to finish the substring. To do this, I have another piece of script from the helpful people of this site that makes an array out of the indexes of every instance of a character. I will then use whichever array object is a higher number than the first number for the substring.
It's a bit convoluted, but I'm not great with Javascript yet, and if there is an easier way, I don't know it.
What is the character I need to use to emulate a return key in a txt file in javascript for extendscript for indesign?
Thank you.
I have tried things like \n and \r\n and ^p both with and without quotes around them but none of those seem to show up in the array when I try them.
//Load Email as String
var b = new File("~/Desktop/Test/email.txt");
b.open('r');
var str = "";
while (!b.eof)
str += b.readln();
b.close();
var orderNumberLocation = str.search("Order Number: ") + 14;
var orderNumber = str.substring(orderNumberLocation, ARRAY NUMBER GOES HERE)
var loc = orderNumberLocation.lineNumber
function indexes(source, find) {
var result = [];
for (i = 0; i < source.length; ++i) {
// If you want to search case insensitive use
// if (source.substring(i, i + find.length).toLowerCase() == find) {
if (source.substring(i, i + find.length) == find) {
result.push(i);
}
}
alert(result)
}
indexes(str, NEW PARAGRAPH CHARACTER GOES HERE)
I want all my line breaks to show up as an array of indexes in the variable "result".
Edit: My method of importing stripped all line breaks from the document. Using the code below instead works better. Now \n works.
var file = File("~/Desktop/Test/email.txt", "utf-8");
file.open("r");
var str = file.read();
file.close();
You need to use Regular Expressions. Depending on the fields do you need to search, you'l need to tweek the regular expressions, but I can give you a point. If the fields on the email are separated by new lines, something like that will work:
var str; //your string
var fields = {}
var lookFor = /(Order Number:|Adress:).*?\n/g;
str.replace(lookFor, function(match){
var order = match.split(':');
var field = order[0].replace(/\s/g, '');//remove all spaces
var value = order[1];
fields[field]= value;
})
With (Order Number:|Adress:) you are looking for the fields, you can add more fields separated the by the or character | ,inside the parenthessis. The .*?\n operators matches any character till the first break line appears. The g flag indicates that you want to look for all matches. Then you call str.replace, beacause it allows you to perfom a single task on each match. So, if the separator of the field and the value is a colon ':', then you split the match into an array of two values: ['Order number', 12345], and then, store that matches into an object. That code wil produce:
fields = {
OrderNumber: 12345,
Adresss: "my fake adress 000"
}
Please try \n and \r
Example: indexes(str, "\r");
If i've understood well, wat you need is to str.split():
function indexes(source, find) {
var order;
var result = [];
var orders = source.split('\n'); //returns an array of strings: ["order: 12345", "order:54321", ...]
for (var i = 0, l = orders.length; i < l; i++)
{
order = orders[i];
if (order.match(/find/) != null){
result.push(i)
}
}
return result;
}

Create a text area and analyze button

I am working on my college homework. I am having a lot of difficulty with it and getting stuck. My class mates are not helping me and the instructor hasn't responded. I am hoping I might get some help/understanding here. The current assignment I am working on and it is due today is:
Create a page containing a textarea and an “analyze” button. The results area will display the frequency of words of x characters. For example, the text “one two three” contains 2 3-character words and 1 5-character word. An improvement to the original design would be to strip out any extraneous characters that may skew the count.
I am just starting it now, so I will add the code here as I update. I know I won't have a problem with the HTML part, the JavaScript will be my problem. From what I get, I will need to have a function that counts the words and the characters in each word. But it needs to exclude spaces and characters like: ,.';/. I have not run across this code before, so any input on how I should frame the javascript will be helpful. Also it seems he wants me to list how many words have the same characters? am I reading this right?
My code thus far:
<!DOCTYPE html>
<html>
<body>
<textarea id="txtarea">
</textarea>
<input type="button" id="analyze" value="Analyze" onclick="myFunction()" />
<p id="demo"></p>
<p id="wcnt"></p>
<script>
function myFunction() {
var str = document.getElementById("txtarea").value;
var res = str.split(/[\s\/\.;,\-0-9]/);
var n = str.length;
document.getElementById("demo").innerHTML = "There are " + n + " characters in the text area.";
for (var i = 0; i < res.length; i++) {
s = document.getElementById("txtarea").value;
s = s.replace(/(^\s*)|(\s*$)/gi, "");
s = s.replace(/[ ]{2,}/gi, " ");
s = s.replace(/\n /, "\n");
document.getElementById("wcnt").innerHTML = "There are " + s.split(' ').length + " words in the text area.";
}
}
</script>
</body>
</html>
Now I need to figure out how to make it count the characters of each word then output how many words have x amount of characters. Such as 5 words have 4 characters and so on. Any suggestions?
var textarea = document.getElementById("textarea"),
result = {}; // object Literal to hold "word":NumberOfOccurrences
function analyzeFrequency() {
// Match/extract words (accounting for apostrophes)
var words = textarea.value.match(/[\w']+/g); // Array of words
// Loop words Array
for(var i=0; i<words.length; i++) {
var word = words[i];
// Increment if exists OR assign value of 1
result[word] = ++result[word] || 1;
}
console.log( result );
}
analyzeFrequency(); // TODO: Do this on some button click
<textarea id="textarea">
I am working on my college-homework.
Homework I am having a lot of difficulty with it and getting stuck.
My class mates are not helping me and the instructor hasn't responded.
I am hoping I might get some help/understanding here.
</textarea>
Notice how Homework and homework (lowercase) are registered as two different words, I'll leave it to you to fix that - if necessary and implement the analyzeFrequency() trigger on some button click.
Most likely you will have to use JavaScript's split function with regex to define all the characters you do not want to include. Then loop through the resulting array and count the characters in each word.
var words = document.getElementById("words");
var analyze = document.getElementById("analyze");
analyze.addEventListener("click", function(e) {
var str = words.value;
var res = str.split(/[\s\/\.;,\-0-9]/);
for(var i = 0; i < res.length; i++) {
alert(res[i].length);
}
});
<textarea id="words">This is a test of this word counter thing.</textarea>
<br/>
<button id="analyze">
Analyze
</button>
Your instructor does NOT want you to list how may words have the same characters but rather the same number of characters. The basic algorithm:
Assign the value of the text area to a variable.
Convert that string value into an array. In javascript this could be accomplished with the String split method using a regular expression containing a character class.
Iterate over that array examining each element for its length. For each element, increment a counting object's property whose property name is the length of the element.
Iterate over the counting object's property list. Output to the result area each property name and its value.

Javascript inserting weird newLine character

I have an array named verses that contains strings created from an ajax response. The array is created like this:
verses.push(splitStr[i].replace('\n',''));
Later I create some <span> elements and append the values from the array. However the last element from array always has a strange behavior because it contains a hidden new line character in ASCII it has the code 10 (checked that in the console). Now when I print in the console log the last element from the array a get this result: "string". Then I create the span element that contains this string and later when I retrieve back the value from span I get:
"string
"
That's because when creating the span it always inserts this strange new line character. So in the source code the span looks like:
<span class="answer" onclick="checkAnswer(this)">potopului
</span>
You can see that the closing tag is on the next line.
In the console I used some break points and I got this value extracted from span: "string↵"
Now, has anyone any idea why when creating this span javascript inserts a new line character and why does it happen only with the last element from array?
The code used to create the span elements:
for (var i = 0; i < 3; i++) {
if (i!=phtml) {
tags.push("<span class='answer' onclick='checkAnswer(this)'>"+generateRandom(pos)+'</span>');
//generate a string from the array different from the one with position pos
}else{
tags.push("<span class='answer' onclick='checkAnswer(this)'>"+verses[pos].replace('\n','')+'</span>');
}
}
var output='';
for (var i = 0; i < tags.length; i++) {
output = output + tags[i];
}
document.getElementsByClassName('v-options')[0].innerHTML = output;
The checkAnswer() function:
function checkAnswer(e){
var text = e.innerHTML;
var input = document.getElementsByClassName('hidden-word')[pos];
if (text == verses[pos]) {
input.value = verses[pos];
input.setAttribute('disabled','');
}
console.log(":"+text.substring(0, text.length-1) + ":"+verses[pos]+":");
}
Sometimes line breaks are printed in different styles. Commonly it is a combination of two special characters \n and \r so you just need to check all possible types of newline combinations or their lost broken parts. Try to change your RegExp to match them all :
splitStr[i].replace(/\n\r|\n|\r/g, '')

Search and highlight in html with multiple keywords as a single string

In JavaScript, by given a html string with tags like:
This string has different fonts.
<b>This</b>
<i>string</i>
<span style="background-color: rgb(212, 239, 181);">has</span>
<b>different</b>
<i>fonts</i>.
When user searches for a search term with multiple words like "different fonts".
How can I add highlighting to make the html string look like:
<b>This</b>
<i>string</i>
<span style="background-color: rgb(212, 239, 181);">has</span>
<span class="highlight">
<b>different</b>
<i>fonts</i>
</span>.
Please note that the search term is treated as a single string as if the words are in a quote, so I cannot search and highlight each word individually.
Utilize innerHTML + str.replace in Javascript
Start by placing a div around your content.
<div id='content'>
Set the content to a variable in Javascript.
var xyz = document.getElementById("content").innerHTML;
Explode the users search into an array and use Javascripts str.replace to filter through the content variable.
var needle = document.getElementById("needle").innerHTML;
var splitArray = str.split(" ");
for (var i = 0; i < splitArray.length; i++) {
/* code below mentioned later */
xyz = str.replace("<span class='highlight'>" + splitArray[i] + "</span>", splitArray[i]);
}
set the replace text to:
"<span class='highlight'>" + /* needle (see above) */ + "</span>"
To keep them consecutive, go through the xyz string and replace the span tags with 3 character replacements:
var replaceS = xyz.replace("</span>", "~/S");
var replaceS = replaceS.replace("<span class='bold'>", "~/B");
Then loop through the string using indexOf. If there is a split array that has an index of the previous split array.length + 7 then you know it is consecutive. The 7 comes from the space between the words + the 3 character replacement you made for the start and end spans: 7 = 3 + 1 + 3
var countR = 0;
// CREATE A LOOP HERE
var indxStr = replaceS.indexOf(splitArray[0],countR);
if (replaceS.indexOf(splitArray[1] == (indxStr.length + 7) {
// good so far!
} else {
// get the previous index and add one to it (so that we do not repeat)
countR = replaceS.indexOf(indxStr) + 1;
}
// END YOUR LOOP HERE
Where I put "CREATE YOUR LOOP HERE" you want loop so that you can find multiple occurrences of your string (indexOf only gets the first, that is why we used the countR variable to avoid the previous search). The "good so far" comment is to continue on this same style of loop, this loop will only handle 2 words "different fonts" should there be 3 like "has different fonts" then you will need a loop that counts per word ->
for (var q = 0; q < splitArray.length; q++) {
if (q > 1) {
if (replaceS.indexOf(splitArray[q] == (splitArray[q - 1].length + 7) {
}
}
} else {
// use original code above with splitArray[1] and indxStr
}
// etc~

Using String.substring for Words

I have the following example where I am putting a limit on the characters entered in the Textarea:
var tlength = $(this).val().length;
$(this).val($(this).val().substring(0, maxchars));
var tlength = $(this).val().length;
remain = maxchars - parseInt(tlength);
$('#remain').text(remain);
where maxchars is the number of characters. How can I change this example to work with words, so instead of restricting chars, I restrict to a number of words.
http://jsfiddle.net/PzESw/106/
I think you need to change one string of your code to something like this:
$(this).val($(this).val().split(' ').slice(0, maxchars).join(' '));
This code splits text in an array of words (you may need another workflow), removes extra words and joins them back
A simple way would be to converting the full String into array of words.
For example you're having a String as:
var words = "Hi, My name is Afzaal Ahmad Zeeshan.";
var arrayOfWords = words.split(" "); // split at a white space
Now, you'll have an array of words. Loop it using
for (i = 0; i < words.length; i++) {
/* write them all, or limit them in the for loop! */
}
This way, you can write the number of words in the document. Instead of characters!

Categories

Resources