I have to write a script to check if a word entered by a user is a Palindrome. I've gotten as far as validating the word and displaying the number of characters. Also not supposed to use the reverse method.
I've looked at some of the examples here and think I need to turn the user input into a string and use a "for" loop and if/else statement. But how do I turn the user input into a string in order to check each character? This is a total mess but it's all I've got so far:
function checkWord(userWord3) {
var answer = "Your word is";
answer += retrieveWord(userWord3);
return (answer);
}
function retrieveWord(userWord) {
var string = userWord;
var i = userWord.length;
for(var i = 0; i < str.length / 2; i++) {
alert(str[i], str[str.length -i -1]);
if( str[i] != str[str.length - i -1] ) {
return false;
}
}
}
You can try this function
function isPalindrome(str){
if(str.length < 2) return true;
if(str[0] != str.slice(-1)) return false;
return isPalindrome(str.slice(1,-1));
}
It uses recursion and its logic is as follows
The empty and 1 character string are considered palindromes
if(str.length == 0 || str.length == 1) return true;
if the first and last characters are not the same the word is not a palindrome
if(str[0] != str.slice(-1)) return false;
if the first and last are the same continue searching in the remaining string
return isPalindrome(str.slice(1,-1));
var result = document.querySelector(".result");
var palindrome = "<span class='palindrome'>it is a palindrome</span>";
var notpalindrome = "<span class='notpalindrome'>it is NOT a palindrome</span>";
function isPalindrome(str){
if(str.length == 0 || str.length == 1) return true;
if(str[0] != str.slice(-1)) return false;
return isPalindrome(str.slice(1,-1));
}
document.querySelector("input").addEventListener("keyup", function(){
if(isPalindrome(this.value)){
result.innerHTML = palindrome;
} else {
result.innerHTML = notpalindrome;
}
})
.palindrome{color: green;}
.notpalindrome{color: red;}
<input type="text" />
<span class="result"></span>
How are you collecting the user input? In just about every case, it will come into the program as a string (i.e. textbox, prompt), so you don't have to worry about converting it into one.
This code simply takes the word, breaks it into an array, reverses the array and then compares that reversal against the original word. It works for me:
function test(input){
var originalData = input;
var a = [];
for(var i = 0; i < input.length; ++i){
a.push(input.charAt(i));
}
a.reverse();
return (a.join('') === originalData) ? true : false;
}
var word = document.getElementById("userWord");
alert(test(word));
See working version at: https://jsfiddle.net/6cett0bc/6/
The most basic version I can think of is to split the word into letters and check the first against the last, until you end up in the middle, where it doesn't matter if there is an odd amount of letters.
UPDATE I've tested the performance of various implementations and changed my array based answer to a pure string based solution.
If you're curious, here are the performance benchmarks
The fastest solution (so far):
function palindrome(word) {
var middle = Math.ceil(word.length / 2), // determine the middle
i; // prepare the iteration variable
// loop from 0 to middle
for (i = 0; i <= middle; ++i) {
// check letter i against it counterpart on the opposite side
// of the word
if (word[i] !== word[(word.length - 1) - i]) {
// it is not a palindrom
return false;
}
}
// otherwise it is
return true;
}
// listen for clicks on the button and send the entered value to the palindrom function
document.querySelector('button').addEventListener('click', function(e) {
// obtain the input element
var element = document.querySelector('input');
// add/remove the 'palindrom' CSS class to the input field, depending on
// the output of palindrome function
if (palindrome(element.value)) {
element.classList.add('palindrome');
}
else {
element.classList.remove('palindrome');
}
});
input {
color: red;
}
input.palindrome {
color: green;
}
<input name=check placeholder=palindrome><button>check</button>
The text turns green if you have entered a palindrome successfully, red (default) otherwise.
How best to detect the word under the cursor using JavaScript?
I know that this question has been asked before, but the solutions that I have seen do not work in all scenarios.
I have isolated some locations where the code does not work and placed it in a JSFiddle container (http://jsfiddle.net/ohaf4ytL/). Follow along in console, and you can see that "Блгcви2 душE моS" only lists "Блгcви2" and not "душE" and "моS" when hovered over.
The current code in use is taken from How to get a word under cursor using JavaScript? answer by Eyal. It is not an accepted answer, but there's not a large choice of options. Adding spans is a hack and also does not handle cases like Abc. The range.expand('word') feature cuts off when there are characters such as ) inside a word (and my text has this), but I think that's not the only issue.
function getWordAtPoint(elem, x, y) {
if(elem.nodeType == elem.TEXT_NODE) {
var range = elem.ownerDocument.createRange();
range.selectNodeContents(elem);
var currentPos = 0;
var endPos = range.endOffset;
while(currentPos+1 < endPos) {
range.setStart(elem, currentPos);
range.setEnd(elem, currentPos+1);
if(range.getBoundingClientRect().left <= x && range.getBoundingClientRect().right >= x &&
range.getBoundingClientRect().top <= y && range.getBoundingClientRect().bottom >= y) {
range.expand("word");
var ret = range.toString();
range.detach();
return(ret);
}
currentPos += 1;
}
} else {
for(var i = 0; i < elem.childNodes.length; i++) {
var range = elem.childNodes[i].ownerDocument.createRange();
range.selectNodeContents(elem.childNodes[i]);
if(range.getBoundingClientRect().left <= x && range.getBoundingClientRect().right >= x &&
range.getBoundingClientRect().top <= y && range.getBoundingClientRect().bottom >= y) {
range.detach();
return(getWordAtPoint(elem.childNodes[i], x, y));
} else {
range.detach();
}
}
}
return(null);
}
A way of accomplishing what you want would be to split the sentence into html elements and then listening to a hover event. For example, using jQuery:
HTML:
<div id="text"> Блгcви2 душE Блгcви2 This is a test</div>
JavaScript:
var div = $("#text");
div.html(div.text().replace(/(\S+)/g, "<span>$1</span>"));
$("#text span").hover(function(event){
console.log($(this).text());
});
I looked for anything that's not a space with the regex \S and the HTML is now updated to:
<div id="text">
<span>Блгcви2</span>
<span>душE</span>
<span>Блгcви2</span>
<span>This</span>
<span>is</span>
<span>a</span>
<span>test</span>
</div>
When you hover over a word, the word will printed out in the console of your browser.
I'd like to create an SMS gateway which alerts the user each time when 160 chars are written (or pasted). I need to store a variable n containing number of message parts of 160 chars. The code will be like this, just the n needs to be stored globally. Is there any better way than e. g. storing it into a hidden form field?
Note: an assumption that less than 160 chars will be pasted at once is safe in this particular case.
window.onload = function() {
var n=1;
var t=document.getElementById('msg');
t.addEventListener('input', function() {
var l=t.value.length;
if(l>n*160){
n++;
alert('Message will be split into '+n+' parts');
}
}, false);
}
As mentioned in my comment, it depends on what you want to do with n ultimately.
If you just want it to show the user a message, you can update the DOM once you've calculated this value.
Your current example doesn't allow the user to delete text after they've typed/pasted it in. A better example would be stateless, i.e. don't compare n to itself, as in my example below:
var t = document.getElementById('msg');
var splitSize = 10;
var n = 1;
t.addEventListener('input', function() {
var nextN = 1;
if (t.value.length > 0) {
nextN = Math.ceil(t.value.length / splitSize);
}
if (n !== nextN) {
n = nextN;
var label = document.getElementById('label');
if (n === 1) {
label.innerHTML = '';
} else {
label.innerHTML = 'The message will be split into ' + n + ' parts';
}
}
});
<p id="label"></p>
<textarea id="msg"></textarea>
I want to create a string consisting of every character possible and see if any of the popular QR readers are able to read each and every char from this QR Barcode.
My problem is that I simply don't know how to create an object as a byte so that it appears as a IEC 8859 character. I've tried the Typed Arrays, but unable to achieve printing out each character and assigning it to the Telerik / Kendo control
How do I use JS to create a string of ISO/IEC 8859-1 characters, and assign it to the control linked above?
I wrote this function that takes a JavaScript number and determines if it's in the ISO/IEC 8859-1 codespace. Using this which String.fromCharCode allows you to construct the string you're looking for.
function inIsoIec8859_1(code) {
if (typeof code !== "number" || code % 1 !== 0) {
throw Error("code supplied is not a integer type.")
}
if (code > 255 || code < 32 || (code > 126 && code < 160)) {
return false;
}
return true;
}
var isoLatinCodespace = "";
var code = 0;
for (; code < 255; code += 1) {
if (inIsoIec8859_1(code)) {
var current = String.fromCharCode(code);
isoLatinCodespace = isoLatinCodespace + current;
}
}
http://dojo.telerik.com/IGoT/12
Because you accepted my original answer, it is above this line, unedited. I realized something after I posted that could be important.
If you plan on getting this value in a loop, this will serve your needs much better.
var MyApp = {
isoLatinString : (function() {
var isoLatinCodespace = "";
return function () {
if (!isoLatinCodespace) {
function inIsoIec8859_1(code) {
if (typeof code !== "number" || code % 1 !== 0) {
throw Error("code supplied is not a integer type.")
}
if (code > 255 || code < 32 || (code > 126 && code < 160)) {
return false;
}
return true;
}
var code = 0;
for (; code < 255; code += 1) {
if (inIsoIec8859_1(code)) {
var current = String.fromCharCode(code);
isoLatinCodespace = isoLatinCodespace + current;
}
}
}
return isoLatinCodespace;
}
}())
}
Then later using MyApp.isoLatinString(). This new code only generates the string once, even if called multiple times. MyApp can be any object you're using to contain your application.
So, my question has been asked by someone else in it's Java form here: Java - Create a new String instance with specified length and filled with specific character. Best solution?
. . . but I'm looking for its JavaScript equivalent.
Basically, I'm wanting to dynamically fill text fields with "#" characters, based on the "maxlength" attribute of each field. So, if an input has has maxlength="3", then the field would be filled with "###".
Ideally there would be something like the Java StringUtils.repeat("#", 10);, but, so far, the best option that I can think of is to loop through and append the "#" characters, one at a time, until the max length is reached. I can't shake the feeling that there is a more efficient way to do it than that.
Any ideas?
FYI - I can't simply set a default value in the input, because the "#" characters need to clear on focus, and, if the user didn't enter a value, will need to be "refilled" on blur. It's the "refill" step that I'm concerned with
The best way to do this (that I've seen) is
var str = new Array(len + 1).join( character );
That creates an array with the given length, and then joins it with the given string to repeat. The .join() function honors the array length regardless of whether the elements have values assigned, and undefined values are rendered as empty strings.
You have to add 1 to the desired length because the separator string goes between the array elements.
Give this a try :P
s = '#'.repeat(10)
document.body.innerHTML = s
ES2015 the easiest way is to do something like
'X'.repeat(data.length)
X being any string, data.length being the desired length.
see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat
Unfortunately although the Array.join approach mentioned here is terse, it is about 10X slower than a string-concatenation-based implementation. It performs especially badly on large strings. See below for full performance details.
On Firefox, Chrome, Node.js MacOS, Node.js Ubuntu, and Safari, the fastest implementation I tested was:
function repeatChar(count, ch) {
if (count == 0) {
return "";
}
var count2 = count / 2;
var result = ch;
// double the input until it is long enough.
while (result.length <= count2) {
result += result;
}
// use substring to hit the precise length target without
// using extra memory
return result + result.substring(0, count - result.length);
};
This is verbose, so if you want a terse implementation you could go with the naive approach; it still performs betweeb 2X to 10X better than the Array.join approach, and is also faster than the doubling implementation for small inputs. Code:
// naive approach: simply add the letters one by one
function repeatChar(count, ch) {
var txt = "";
for (var i = 0; i < count; i++) {
txt += ch;
}
return txt;
}
Further information:
Run speed test in your own browser
Full source code of speed test
Speed test results
I would create a constant string and then call substring on it.
Something like
var hashStore = '########################################';
var Fiveup = hashStore.substring(0,5);
var Tenup = hashStore.substring(0,10);
A bit faster too.
http://jsperf.com/const-vs-join
A great ES6 option would be to padStart an empty string. Like this:
var str = ''.padStart(10, "#");
Note: this won't work in IE (without a polyfill).
Version that works in all browsers
This function does what you want, and performs a lot faster than the option suggested in the accepted answer :
var repeat = function(str, count) {
var array = [];
for(var i = 0; i <= count;)
array[i++] = str;
return array.join('');
}
You use it like this :
var repeatedCharacter = repeat("a", 10);
To compare the performance of this function with that of the option proposed in the accepted answer, see this Fiddle and this Fiddle for benchmarks.
Version for moderns browsers only
In modern browsers, you can now also do this :
var repeatedCharacter = "a".repeat(10) };
This option is even faster. However, unfortunately it doesn't work in any version of Internet explorer.
The numbers in the table specify the first browser version that fully supports the method :
For Evergreen browsers, this will build a staircase based on an incoming character and the number of stairs to build.
function StairCase(character, input) {
let i = 0;
while (i < input) {
const spaces = " ".repeat(input - (i+1));
const hashes = character.repeat(i + 1);
console.log(spaces + hashes);
i++;
}
}
//Implement
//Refresh the console
console.clear();
StairCase("#",6);
You can also add a polyfill for Repeat for older browsers
if (!String.prototype.repeat) {
String.prototype.repeat = function(count) {
'use strict';
if (this == null) {
throw new TypeError('can\'t convert ' + this + ' to object');
}
var str = '' + this;
count = +count;
if (count != count) {
count = 0;
}
if (count < 0) {
throw new RangeError('repeat count must be non-negative');
}
if (count == Infinity) {
throw new RangeError('repeat count must be less than infinity');
}
count = Math.floor(count);
if (str.length == 0 || count == 0) {
return '';
}
// Ensuring count is a 31-bit integer allows us to heavily optimize the
// main part. But anyway, most current (August 2014) browsers can't handle
// strings 1 << 28 chars or longer, so:
if (str.length * count >= 1 << 28) {
throw new RangeError('repeat count must not overflow maximum string size');
}
var rpt = '';
for (;;) {
if ((count & 1) == 1) {
rpt += str;
}
count >>>= 1;
if (count == 0) {
break;
}
str += str;
}
// Could we try:
// return Array(count + 1).join(this);
return rpt;
}
}
Based on answers from Hogan and Zero Trick Pony. I think this should be both fast and flexible enough to handle well most use cases:
var hash = '####################################################################'
function build_string(length) {
if (length == 0) {
return ''
} else if (hash.length <= length) {
return hash.substring(0, length)
} else {
var result = hash
const half_length = length / 2
while (result.length <= half_length) {
result += result
}
return result + result.substring(0, length - result.length)
}
}
You can use the first line of the function as a one-liner if you like:
function repeat(str, len) {
while (str.length < len) str += str.substr(0, len-str.length);
return str;
}
I would do
Buffer.alloc(length, character).toString()
If it's performance you need (prior to ES6), then a combination of substr and a template string is probably best. This function is what I've used for creating space padding strings, but you can change the template to whatever you need:
function strRepeat(intLen, strTemplate) {
strTemplate = strTemplate || " ";
var strTxt = '';
while(intLen > strTemplate.length) {
strTxt += strTemplate;
intLen -= strTemplate.length;
}
return ((intLen > 0) ? strTxt + strTemplate.substr(0, intLen) : strTxt);
}