How to find if there is a space in a string... tricky - javascript

I'm doing this for a school project but one thing is bugging me, there is a part of the project that requires me to change white space or just " " a space to a number. Here is my code:
I know its messy, I've only been coding for half a year
exclsp is "exclude spaces"
inclsp is "include spaces"
dispwos is "display without spaces"
dispwsp is "display with spaces"
var txt;
var num;
var spce = 0;
function cnt()
{
txt = document.getElementById('disp').value;
num = txt.length;
// includes spaces into the returned number
if (document.getElementById("inclsp").checked == true)
{
document.getElementById("dispwsp").innerHTML = num + " characters.";
}
// excludes spaces from the returned number
if (document.getElementById("exclsp").checked === true)
{
for (var i = 0; i < num; i++) {
if (txt.includes(" "))
{
// alert("THERES A SPACE HERE");
spce++;
}
else
{
num = num;
}
}
}
document.getElementById("dispwos").innerHTML = num - spce + " characters.";
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="LetterCount.js"></script>
<link rel="stylesheet" type="text/css" href="LetterCount.css"/>
<title>Letter Counter</title>
</head>
<body>
<textarea rows="4" cols="50" placeholder="Input your text here!" id="disp"></textarea><br>
<form name="form1">
<input type="radio" name="button" id="inclsp"> Include spaces</input><br>
<input type="radio" name="button" id="exclsp"> Exclude spaces</input><br>
</form>
<button onclick="cnt()">Click Me!</button><br><br>
<div id="dispwsp"></div>
<div id="dispwos"></div>
</body>
</html>

I think you need to change this line:
if (txt.includes(" "))
to
if (txt[i] == " ")
so that you're actually checking each character rather that attempting to examine the whole string each time.
You could also use a regular expression and do it in one simple line of code and eliminate the loop altogether:
spce = txt.match(/\s/g).length

I don't understand the purpose of the dispwsp dispwos so I just removed them. You only have 1 result you want to display so why put it in different places just make one div for your result, like
<div id="result"></div>
And your JS can be simplified a lot, you don't need to loop through the letters. Here's the fiddle: https://jsfiddle.net/zwzqmd27/
function cnt() {
var inputText = document.getElementById("disp").value;
if (document.getElementById("exclsp").checked) //exclude spaces
{
document.getElementById("result").innerHTML = inputText.split(" ").join("").length + " characters";
}
else //include spaces
{
document.getElementById("result").innerHTML = inputText.length + " characters";
}
}

Possible duplicate of Check if a string has white space
But you can try this.
function hasWhiteSpace(s) {
return s.indexOf(' ') >= 0;
}

If You want to change a white space in a string to a number..
This could possibly help you ...
str.replace(/\s/g,"9");//any number(that You want)
This piece of code is basically replaces the white space with a number..

As #Micheal said, you can use indexOf() method to check if particular character(s) is present in your text content.
You just need to pass the character or substring(set of characters) to check if it is present.
Example :
var myText = "Sample text";
var substringIndex = myText.indexof(" "); //substringIndex = 6
substringIndex = mytext.indexof("ex");//substringIndex = 8;
substringIndex = mytext.indexof("tt"); // substringIndex =-1;
If substring doesn't matches, it will return -1 as index.
By using index you can say, if particular character(substring) presents if index value is greater than -1.
Note : If u pass set of characters, it will return only the starting index of the first character if entire set matches.
In your case, it would be like
...........
...........
if (txt.indexOf(" ")>-1)
{
// alert("THERES A SPACE HERE");
spce++;
}
else
{
num = num;
}
...............
...............

Just replace script with code bellow..
I do it for you...
var txt;
var num;
var spce = 0;
function cnt()
{
//to clear "dispwsp" and "dispwos" before action in cnt() function
document.getElementById("dispwsp").innerHTML = "";
document.getElementById("dispwos").innerHTML = "";
txt = document.getElementById('disp').value;
num = txt.length;
// includes spaces into the returned number
if (document.getElementById("inclsp").checked == true)
{
document.getElementById("dispwsp").innerHTML = num + " characters.";
}
// excludes spaces from the returned number
if (document.getElementById("exclsp").checked == true)
{
num = 0;
spce = 0;
for (var i = 0; i < txt.length; i++) {
var temp = txt.substring(i, (i+1));
if(temp==" ")
{
spce++;
}else
{
num++;
}
document.getElementById("dispwos").innerHTML = num + " characters and "+ spce +" spces ";
}
}
}

Related

If statement with OR condition not working

I have no JS or other language background. I have learned everything in the code for this particular problem so bear with me if things aren't clean and clever. I have done a lot of searching before resulting to asking here, so hopefully ALMOST everything is accounted for.
I have a conditional statement I just CANNOT get to run correctly. (entire code for context at the bottom)
if (pyramid < 1 || pyramid > 8) {
var dennis = document.getElementById("dennis");
var showdennis = "#ahahah{display: block}";
dennis.appendChild(document.createTextNode(showdennis));
document.getElementById("giza").innerHTML = "";
return;
}
I am most concerned with (pyramid < 1 || pyramid > 8) but if you can help me account for an input value of zero (due to complexities with 0 being false-y), bonus points.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<style id="dennis">
#ahahah {
display: none;
}
</style>
</head>
<body>
<h1>Text Box Input and Output</h1>
<form action="">
<fieldset>
<label>write how tall </label>
<input type="number" id="numberin" min="" max="" step="1" />
<input type="button" value="Make the Pyramid" onclick="makepyramid()" />
</fieldset>
</form>
<script type="text/javascript">
function makepyramid() {
var numberin = document.getElementById("numberin");
var pyramid = numberin.value;
var spaceincrement = numberin.value;
var octoincrement = numberin.value;
var spaces;
var octothorps;
var bringittogether = "";
//WHY YOU NO WORK?! I'd like to make 0 work as well but I am more concerned with the range first.
//first if statement is the ideal, second is bare minimum.
//if (pyramid === null || pyramid < 1 || pyramid > 8) {
//if (pyramid < 1 || pyramid > 8) {
//Put in this if statement to show what SHOULD happen
if (pyramid > 8) {
var dennis = document.getElementById("dennis");
var showdennis = "#ahahah{display: block}";
dennis.appendChild(document.createTextNode(showdennis));
document.getElementById("giza").innerHTML = "";
return;
} else {
document.getElementById("ahahah").innerHTML = "";
//decide how many lines to make
for (var a = 0; a < pyramid; a++) {
//number of spaces loop
for (var b = 1, spaces = ""; b < spaceincrement; b++) {
spaces += "_";
}
//number of octothorps in one line loop
for (var c = pyramid, octothorps = ""; c >= octoincrement; c--) {
octothorps += "#";
}
//print spaces, hashes, 2 spaces, start new line
bringittogether += spaces + octothorps + "__" + octothorps + "<br/>";
document.getElementById("giza").innerHTML = bringittogether;
//increment to change next line's number of spaces (one less) and octothorps (one more)
spaceincrement = [spaceincrement - 1];
octoincrement = [octoincrement - 1];
}
}
}
</script>
<hr />
<div id="giza"></div>
<div id="ahahah">
<p><img src="https://i.imgur.com/1A8Zgnh.gif" /> You must select a number between 1 and 8
</p>
</div>
</body>
</html>

Why is my character counter not excluding spaces?

I am making a character counter with HTML, CSS, JS. I got the counter working, but I have a checkbox that should get the length of the input without the spaces, but it is not working. Please check my code and tell me what's wrong.
function char_count(str, letter) {
var letter_Count = 0;
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) == letter) {
letter_Count += 1;
}
}
return letter_Count;
}
function countChars(obj) {
var length = obj.value.length;
var output = document.getElementById("chars");
var dis = document.getElementById("removeSpace");
if (dis.checked) {
var spaces = char_count(obj, " ");
length = length - spaces;
output.innerHTML = length + ' characters';
} else {
output.innerHTML = length + ' characters';
}
}
<h1> Character Counter </h1>
<textarea id="input" onkeyup="countChars(this)" placeholder="Enter your text here..." autofocus></textarea>
<input type="checkbox" id="removeSpace">
<label for="removeSpace" onclick="countChars(document.getElementById('input'))">Don't Include Spaces</label>
<span id="chars">0 Characters</span>
You could make the code more simpler. Moreover, you have placed the checkbox outside the label that has onclick="countChars(document.getElementById('input'))", that's why the condition dis.checked in js does not find the checkbox as checked. Place the checkbox inside the label.
The whole simplified code would be like this,
<h1> Character Counter </h1>
<textarea id="input" onkeyup="countChars(this)" placeholder="Enter your text here..." autofocus></textarea>
<label for="removeSpace" onclick="countChars(document.getElementById('input'))">
<input type="checkbox" id="removeSpace">
Don't Include Spaces</label>
<span id="chars">0 Characters</span>
<script>
function countChars(obj) {
var length = obj.value.length;
var output = document.getElementById("chars");
var dis = document.getElementById("removeSpace");
if (dis.checked) {
length = obj.value.replace(/\s/g, '').length
}
output.innerHTML = length + ' characters';
}
</script>

check if word already exists in the array [duplicate]

This question already has answers here:
Check if string inside an array javascript
(2 answers)
Closed 5 years ago.
I'm trying to check if the inputted word is already inside of my array. SO for example, if someone enters 'cat' more than once an error message will display saying "cat has already been entered". I've tried a few different combinations of code but nothing I do seems to work. The findword function is what I have so far. Can someone take a look at my code and explain why its not working and provide a possible fix.
On another note, why doesn't the "word: empty" message pop up when the input field has been left blank?.
<body>
<input type="text" id=input></input>
<button onclick="addword()" class="button" type = "button">Add word</button><br><br>
<button onclick="start()" class="button" type = "button">Process word</button><br><br>
<p id="ErrorOutput"></p>
<p id="output"></p>
<p id="nameExists"></p>
</body>
.
var array = [];
return = document.getElementById("input").value;
function start() {
var word = "word List";
var i = array.length
if (word.trim() === "") {
word = "word: Empty"
}
document.getElementById('ErrorOutput').innerHTML = word
while (i--) {
document.getElementById('output').innerHTML = array[i] + "<br/>" + document.getElementById('output').innerHTML;
}
var longestWord = {
longword: '',len: 0};
array.forEach(w => {
if (longestWord.len < w.length) {
longestWord.text = w;
longestWord.len = w.length;
}
});
document.getElementById('ErrorOutput').innerHTML = "The longest name in the array is " + longestWord.len + " characters";
}
function addword() {
return = document.getElementById('input').value;
array.push(return);
}
function findword() {
var nameExists = array.indexOf(
return) < 0 ?
'The number ' +
return +' does not exist in the array': 'The number ' +
return +' exists in the array'
document.getElementById('nameExists').textContent = nameExists
}
You can use array.indexOf(word) (command for your situation) to find the position of the word.
If the position is -1 the word is not inside the array.
More information on W3

Check if value is a whitespace

I'm trying to write something like an image font generator, but I can not check if the form value is an space, or give an URL to an whitespace image.
Here is my code:
<html><head><title>untitled</title>
<script type="text/javascript">
<!--
function fontgen(text) {
var url = './fonts/';
var letters = text.split('');
var imgStr = "";
for (var i in letters) {
imgStr += '<img src="' +url+letters[i]+ '.gif">';
}
document.getElementById('name').innerHTML = imgStr;
return false;
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
<input type="text" name="myinput" size="20"><br>
<input type="button" value="Make Font" onclick="return fontgen(document.myform.myinput.value)">
</form>
<div id="name"></div>
</body>
</html>
function fontgen(text) {
var url = './fonts/',
letters = text.split(''),
imgStr = "";
// First, you need a valid for loop:
for (var i = 0; i < letters.length; i++) {
if (letters[i] !== ' ') { // then, check to see if it is a space
imgStr += '<img src="' +url+letters[i]+ '.gif">';
}
}
document.getElementById('name').innerHTML = imgStr;
return false;
}
From what I can tell from your question, you're looking for something like this:
for (var i=0;i<text.length;i++)
{
if (text.charAt(i) !== ' ')
{//using charAt, you're supporting all browsers, without having to split the string
console.log(text.charAt(i) + ' is not space');
}
}
But an easier way of doing this, without having to loop through all chars, 1 by 1, is this:
if (text.indexOf(' ') === -1)
{
console.log('No spaces in ' + text + ' found');
}
Or, if you want to, you can replace or remove all spaces in one go:
text = text.replace(/\s/g,'_');//replaces spaces with underscores
text = text.replace(/\s/g, '');//removes spaces
Regex-mania way. Suppose you have a certain set of chars as gifs, you can easily use a single regex to replace all of those chars with their corresponding images in one fell swoop:
var imgString = text.replace(/([a-z0-9\s])/gi, function(char)
{
if (char === ' ')
{
char = 'space';//name of space img
}
return '<img src="'url + char + '.gif"/>';
});
Same logic applies to chars like ! or ., since they're not exactly suitable for file names, use an object, array or switch to replace them with their corresponding file-names.Anyway, with input like foo bar, the output of the code above should look something like this:
<img src="./fonts/f.gif"/><img src="./fonts/o.gif"/><img src="./fonts/o.gif"/><img src="./fonts/space.gif"/><img src="./fonts/b.gif"/><img src="./fonts/a.gif"/><img src="./fonts/r.gif"/>
Not sure why your path is ./foo/[].gif, I suspect foo/[].gif would do just as well, but that's not the issue at hand here.
In case you're interested: here's some more about replacing using regex's and callbacks
try replacing letters[i]
with:
(letters[i] == " ") ? "spacefilename" : letters[i]
this is a ternary operator. basically a shorthand if statement that can be used directly in place of letters[i]
in a sense it would be like replacing letters[i] with myfilename(letters[i])
where the myfilename function is
function myfilename(char)
{
if (char == " ") {
return "space";
} else {
return char;
}
}
so your code would look like this:
<html><head><title>untitled</title>
<script type="text/javascript">
<!--
function fontgen(text) {
var url = './fonts/';
var letters = text.split('');
var imgStr = "";
for (var i = 0; i < letters.length; i++) {
imgStr += '<img src="' +url+(letters[i] == " ") ? "spacefilename" : letters[i]+ '.gif">';
}
document.getElementById('name').innerHTML = imgStr;
return false;
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
<input type="text" name="myinput" size="20"><br>
<input type="button" value="Make Font" onclick="return fontgen(document.myform.myinput.value)">
</form>
<div id="name"></div>
</body>
</html>
/e also as someone else mentioned, the for loop is wrong. i corrected that just now.
a "for...in" loop could work there... don't want to get into all that though.
Try changing the character into a char code and having a corresponding image file for each code you want to support; you can also put a range check via if statement to make sure the codes fall within your accepted ranges.
function fontgen(text)
{
var imgStr = "";
for (var i = 0; i < text.length; i++)
imgStr += '<img src="./fonts/' + text[i].charCodeAt(0) + '.gif">';
document.getElementById('name').innerHTML = imgStr;
return false;
}
If you supply this function the phrase "this is a test" it will result in:
<div id="name">
<img src="./fonts/116.gif">
<img src="./fonts/104.gif">
<img src="./fonts/105.gif">
<img src="./fonts/115.gif">
<img src="./fonts/32.gif">
<img src="./fonts/105.gif">
<img src="./fonts/115.gif">
<img src="./fonts/32.gif">
<img src="./fonts/97.gif">
<img src="./fonts/32.gif">
<img src="./fonts/116.gif">
<img src="./fonts/101.gif">
<img src="./fonts/115.gif">
<img src="./fonts/116.gif">
</div>
<img src="./fonts/32.gif"> would be the space image.

Limiting character in textbox input

please be nice. I'm trying to create a page which sets limit and cut the excess (from the specified limit). Example: Limit is 3. then, I'll input abc if I input d it must say that its limit is reached and the abc will remain. My problem is that it just delete my previous input and make new inputs. Hoping for your great cooperation. Thanks.
<html>
<script type="text/javascript">
function disable_btn_limit(btn_name)
{
/* this function is used to disable and enable buttons and textbox*/
if(btn_name == "btn_limit")
{
document.getElementById("btn_limit").disabled = true;
document.getElementById("ctr_limit_txt").disabled = true;
document.getElementById("btn_edit_limit").disabled = false;
}
if(btn_name == "btn_edit_limit")
{
document.getElementById("btn_limit").disabled = false;
document.getElementById("ctr_limit_txt").disabled = false;
document.getElementById("btn_edit_limit").disabled = true;
}
}
function check_content(txtarea_content)
{
/*This function is used to check the content*/
// initialize an array
var txtArr = new Array();
//array assignment
//.split(delimiter) function of JS is used to separate
//values according to groups; delimiter can be ;,| and etc
txtArr = txtarea_content.split("");
var newcontent = "";
var momo = new Array();
var trimmedcontent = "";
var re = 0;
var etoits;
var etoits2;
//for..in is a looping statement for Arrays in JS. This is similar to foreach in C#
//Syntax: for(index in arr_containter) {}
for(ind_val in txtArr)
{
var bool_check = check_if_Number(txtArr[ind_val])
if(bool_check == true)
{
//DO NOTHING
}
else
{
//trim_content(newcontent);
newcontent += txtArr[ind_val];
momo[ind_val] = txtArr[ind_val];
}
}
var isapa = new Array();
var s;
re = trim_content(newcontent);
for(var x = 0; x < re - 1; x++){
document.getElementById("txtarea_content").value += momo[x];
document.getElementById("txtarea_content").value = "";
}
}
function trim_content(ContentVal)
{
//This function is used to determine length of content
//parseInt(value) is used to change String values to Integer data types.
//Please note that all value coming from diplay are all in String data Type
var limit_char =parseInt(document.getElementById("ctr_limit_txt").value);
var eto;
if(ContentVal.length > (limit_char-1))
{
alert("Length is greater than the value specified above: " +limit_char);
eto = limit_char ;
etoits = document.getElementById("txtarea_content").value;
//document.getElementById("txtarea_content").value = "etoits";
return eto;
//for(var me = 0; me < limit_char; me++)
//{document.getElementById("txtarea_content").value = "";}
}
return 0;
}
function check_if_Number(ContentVal)
{
//This function is used to check if a value is a number or not
//isNaN, case sensitive, JS function used to determine if the values are
//numbers or not. TRUE = not a number, FALSE = number
if(isNaN(ContentVal))
{
return false;
}
else
{ alert("Input characters only!");
return true;
}
}
</script>
<table>
<tr>
<td>
<input type="text" name="ctr_limit_txt" id="ctr_limit_txt"/>
</td>
<td>
<input type="button" name="btn_limit" id="btn_limit" value="Set Limit" onClick="javascript:disable_btn_limit('btn_limit');"/>
</td>
<td>
<input type="button" name="btn_edit_limit" id="btn_edit_limit" value="Edit Limit" disabled="true" onClick="javascript:disable_btn_limit('btn_edit_limit');"/>
</td>
</tr>
<tr>
<td colspan="2">
<textarea name="txtarea_content" id="txtarea_content" onKeyPress="javascript:check_content(this.value);"></textarea>
<br>
*Please note that you cannot include <br>numbers inside the text area
</td>
</tr>
</html>
Try this. If the condition is satisfied return true, otherwise return false.
<html>
<head>
<script type="text/javascript">
function check_content(){
var text = document.getElementById("txtarea_content").value;
if(text.length >= 3){
alert('Length should not be greater than 3');
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<div>
<textarea name="txtarea_content" id="txtarea_content" onkeypress=" return check_content();"></textarea>
</div>
</body>
</html>
Instead of removing the extra character from the text area, you can prevent the character from being written in the first place
function check_content(event) { //PARAMETER is the event NOT the content
txtarea_content = document.getElementById("txtarea_content").value; //Get the content
[...]
re = trim_content(newcontent);
if (re > 0) {
event.preventDefault(); // in case the content exceeds the limit, prevent defaultaction ie write the extra character
}
/*for (var x = 0; x < re - 1; x++) {
document.getElementById("txtarea_content").value += momo[x];
document.getElementById("txtarea_content").value = "";
}*/
}
And in the HTML (parameter is the event):
<textarea ... onKeyPress="javascript:check_content(event);"></textarea>
Try replacing with this:
for(var x = 0; x < re - 6; x++){
document.getElementById("txtarea_content").value += momo[x];
document.getElementById("txtarea_content").value = "";
}
Any reason why the maxlength attribute on a text input wouldn't work for so few characters? In your case, you would have:
<input type="text" maxlength="3" />
or if HTML5, you could still use a textarea:
<textarea maxlength="3"> ...
And then just have a label that indicates a three-character limit on any input.

Categories