Trim Whitespaces/Characters from a String in JavaScript

Trim Whitespaces/Characters from a String in JavaScript

Introduction

As you aim to become a better JavaScript developer, it is expedient you understand some tricks and methods in JavaScript to save you from unnecessary hard-to-decode bugs in the future. Whenever users input string values through form fields, it is a good practice for you to remove the white spaces from the start and end of the strings and all unnecessary characters. Input is rarely clean, and unclean input can, in some cases, break an application.

In this guide, we will explore different methods on how to trim characters from strings in JavaScript, as well as when to use which.

Removing White Spaces From Strings

Whitespace is defined as an empty space, i.e. a space with no visual representation, but a space that does exist to separate two characters. These whitespaces are created by using the computer keyboard's Space Bar and Tabs, as well as line break characters or line terminators such as \n, \t, \r.

Note: Trimming a string usually refers to trimming the left, right, or more commonly both sides of a string. Most commonly, we trim the potential whitespaces around the string, but we could also trim other characters.

JavaScript provides three functions to assist us in trimming strings entering into our database or application from input fields.

Trim String Whistespaces in JavaScript with trim()

trim() is a built-in string method which is used to, well, trim a string. The method removes the whitespaces from both ends of a string and returns it:

string.trim();

Let's create a username - with a double whitespace in the beginning and a single whitespace at the end:

let username = '  John Doe ';
let trimmed = username.trim();

console.log(trimmed);

This results in:

John Doe

trim() doesn't work in-place, as strings are immutable. It returns a trimmed string back - so we've captured the returned value and printed it.

Note: If whitespace is found between two characters, then, the whitespace is preserved. They're only trimmed from the start and end of a string.

The method is also used to remove line terminators such as \n, \t, \r, e.t.c. For instance, say there's a nasty tab right before a serial number and a newline break after it:

let serialNumber = '\t  011-34201 \n';
console.log('Untrimmed: ', serialNumber)
console.log('Trimmed: ', serialNumber.trim());

This results in:

Untrimmed:	   011-34201 
Trimmed: 011-34201

Again, trim() works by removing the whitespaces from both sides. However, sometimes, you may want to only trim one of the sides instead. This is where you'll opt to use the trimStart() and trimEnd() methods instead.

Trim Start of String with trimStart()

Similar to the trim() method and just like the name implies, trimStart() is used to trim out whitespaces and line terminators only from the beginning of a string. For instance:

let company = '  Stack Abuse  ';
company.trimStart(); // 'Stack Abuse '
  
let serialNumber = '\t  011-34201 \n';
serialNumber.trimStart(); // '011-34201 \n'

In the example above, you will notice that the space at the beginning of the company name was removed. The same logic applies to the still-present newline in the serialNumber.

Trim End of String with trimEnd()

trimEnd() is a polar opposite of the trimStart() method and, just as the name implies, is used to trim out whitespaces and line terminators only from the end of a string. For instance:

let company = '  Stack Abuse  ';
company.trimEnd(); // ' Stack Abuse'
  
let serialNumber = '\t  011-34201 \n';
serialNumber.trimEnd(); // '\t  011-34201'

In the example above, you will notice that instead of affecting the beginning like that of trimStart(), the end was affected by removing space and also the line terminator.

Trim All Whitespaces From Strings

Moving on, let's now see how to trim all whitespaces using Regular Expressions. So far we have only seen how to remove whitespaces from the start or end of our strings - let's now see how to remove all whitespaces.

This is possible using the JavaScript's string.replace() method, which supports Regular Expressions (RegEx) and helps find matches within a particular string. replace() takes two arguments, the first being the Regular Expression matching what we want to remove, and the second being the pattern we'd like to insert instead of the first.

If you'd like to read more about Regular Expressions - read our Guide to Regular Expressions and Matching Strings in JavaScript!

Let’s now compose a Regular Expression to handle the removal of all whitespaces from strings:

• \s: Matches any whitespace symbol such as spaces, tabs, and line breaks.
• +: Matches one or more of the preceding tokens (referencing \s).
• g: Placed at the end to indicate iterative searching throughout the full string.

Let's now combine this RegEx and make use of it to remove whitespaces within, before and after strings:

let sentence = '    I and the man decided   to move  ouT  ';
let trimmed = sentence.replace(/\s+/g, ''); // 'IandthemandecidedtomoveouT'
  
console.log('Untrimmed: ', sentence)
console.log('Trimmed: ', trimmed);

This results in:

Untrimmed:     I and the man decided   to move  ouT  
Trimmed: IandthemandecidedtomoveouT

In the example above, we took out whitespaces and replaced them with an empty string.

Trim Arbitrary Characters with JavaScript

When using Regular Expressions, and the string.replace() method - you're not limited to trimming whitespaces. You can really trim any pattern, and Regular Expression patterns are quite flexible.

We just need to derive a particular RegEx expression depending on the arbitrary characters you wish to trim. Suppose we want to remove a particular character from the start and a different one from the end of a string:

let example = "cccccccccccccccccccccI know the manaaaaaaaaaaaaaaaaaaaa";
let show = example.replace(/c+/, "").replace(/a+$/, "");
console.log(show); // "I know the man"

Or we could also work any arbitraty pattern, such as any number between 0 and 9:

let example = "1234567890I know the man1234567890";
let show = example.replace(/^[0-9]+/, '').replace(/[0-9]+$/, '');
console.log(show); // "I know the man"

Trimming Character From a Particular Index With JavaScript

Finally, another built-in string method can be used to trim strings, given a particular index. The substr() method substrings a string, and returns the subset as a new string. It is used to extract the parts of the string between the given starting and ending index.

To remove the first character from a string - we cut it off at index 1, and set the second parameter as the length of the string:

let username = 'John Doe';
console.log('Original Name: ', username);
  
let newName = username.substr(1, username.length);
console.log('After removing the first character: ', newName);

This results in:

Original Name: John Doe
After removing the first character: ohn Doe

Conclusion

In this guide, we've taken a look at how to trim whitespaces from strings - be it from starts, ends or both ends of the string, in JavaScript.

We've explored the trim(), trimStart() and trimEnd() methods, that automatically trim whitespaces. We've then explored the use of Regular Expressions to replace patterns of whitespaces, with empty strings. Additionally, we've then explored the replacement of any arbitrary pattern in strings with any other pattern instead.

Finally, we've taken a look at the substr() method, to substring and trim characters with a given start and end index.

Original article source at: https://stackabuse.com/

#javascript #string #character 

How to Simple Character Counter using JavaScript & CSS

How to Simple Character Counter using JavaScript & CSS

In this article, you will learn how to create a Character Counter using JavaScript. Earlier I shared with you tutorials on different types of JavaScript word counters, limit character input, etc. 

Here you will learn how to make simple character count javascript. The character counter basically helps to count how many characters are in an input box. You can use it to count every character and space in the input box.

The counted numbers can be seen in a small display. If you want you can put a limit in that input box. Earlier I shared a tutorial that has a limit on character input.

Character Count JavaScript

Below I have given a preview that will help you to know how this character count javascript works. If you only want the source code, use the button below the article.

A box has been created on a web page as you saw above. The background color of this box is white. First of all, a heading has been used in the box which is basically to enhance the beauty. 

Then the character input space is created using textarea. Below all is a small box in which the amount of character can be seen. When you input something into the input box, the amount of that input will count. 

Create Character Counter using JavaScript

This project (Character Counter using JavaScript) is very easy to create if you have an idea about HTML CSS and JavaScript. Here is a step-by-step tutorial for beginners with pictures of possible results after each step.

Step 1: Basic structure of Character Counter

The basic structure of this character count javascript has been created using the following HTML and CSS codes. All the information can be found in this basic structure.

<div class=”container”>
 
</div>

I designed the web page using the following codes. Here I have used blue as the background color of the webpage. 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color:  #1193bd;
  font-family: ‘Roboto’, sans-serif;
}

Character counter width: 500px and height will depend on the amount of content. I used white as the background color and box-shadow to make it more attractive.

.container {
  width: 500px;
  padding: 40px;
  background-color: white;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

Step 2: Add a heading

Now I have used headings in this project. I used the h2 tag of HTML to make the headings. The background color is blue and the text is white.

<h2>Live Character Counter</h2>
.container h2 {
  font-size: 2rem;
  margin: -40px -40px 50px -40px;
  text-align: center;
  background: rgb(29, 98, 203);
  color: #fff;
}

Step 3: Create an input box using textarea

Now we have created an input box using textarea. I have used the height of this texture: 200px and a shadow has been used around it.

<textarea name=”textarea” id=”textarea” cols=”30″ rows=”10″ placeholder=”Input Your Text” onkeyup=”countingCharacter();”></textarea>
.container textarea {
  position: relative;
  margin-bottom: 20px;
  resize: none;
  height: 200px;
  width: 100% !important;
  padding: 10px;
  border: none;
  border-radius: 5px;
  outline: none;
  font-size: 1rem;
  font-family: ‘Roboto’, sans-serif;
  box-shadow: 0 0 10px rgba(0,139,253,0.45);
  letter-spacing: 0.1rem;
}

Step 4: Place to see the result of character count

Has now created a text and a small display. Counted numbers can be seen in this display. The following HTML and CSS are used to create that.

  <p>Total Characters you typed: <span class=”counter”>0</span></p>

I have used CSS below to design the text. Font-size: 1.25rem and color black have been used to increase the size of the text.

.container p {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  color: #333;
}

Now I have designed the display. The width of the display: 40px, height: 40px and a shadow has been used all around.

.container p .counter {
  font-size: 2rem;
  color:#0fb612;
  box-shadow: 0 0 10px rgba(0,139,253,0.45);
  width: 40px;
  height: 40px;
  text-align: center;
  font-weight: 700;
  margin-left: 10px;
}

Step 5: Activate character count javascript

Above we have created all the information of this Simple Character Counter. However, it was not implemented. You need JavaScript enabled to view it. Here I have used very little JavaScript to activate this Simple Character Counter.

First I set the constants of some HTML functions. Because we know that no HTML element is used directly in JavaScript. For this, we have to determine the global constant.

const textarea = document.querySelector(‘textarea’);
const counter = document.querySelector(‘.counter’);

I have added all the information in the JavaScript below. 

First I collected the value of the input box or textarea and stored it in a constant called ‘text’.

Then I calculated the length of the value in the textarea and transmitted it to a constant called ‘textLength’. This length is the number of total characters in the input box.

Using the third line, I have added the value of that ‘textLength’ to the display. I used JavaScript’s ‘innerText’ to associate with this display. We know that ‘innerText’ helps to display any information on a web page.

function countingCharacter() {
 const text = textarea.value;
 const textLength = textarea.value.length;
 counter.innerText = `${textLength}`;
}

Hopefully, you have learned from the above tutorial how I created this character counter using JavaScript. If there is any difficulty then you can definitely let me know by commenting. 

Earlier I shared tutorials on different types of word counters, character limit input. If you want all the source code of this character count javascript then use the button below.

Original article source at: https://foolishdeveloper.com/

#javascript #css #character 

Get The Last N Characters Of A String in JavaScript

Get The Last N Characters Of A String in JavaScript

You can use the slice() method to get the last N characters of a string in JavaScript, passing -n as a negative start index. For example, str.slice(-2) returns a new string containing the last 2 characters of the string.

const str = 'JavaScript'

const last2 = str.slice(-2)
console.log(last2) // pt

const last4 = str.slice(-4)
console.log(last4) // ript

const last6 = str.slice(-6)
console.log(last6) // Script

The slice() method takes the start and end indexes as parameters and returns a new string containing a slice of the original string. It returns the extracted part as a new string and does not change the original string.

When you pass only a start index, the slice() method returns the entire part of the string after the start index.

When you pass a negative start index to slice(), it counts backward from the last string character to find an equivalent index. So passing -n to slice() is equivalent to str.length - n, as shown below:

const str = 'JavaScript'

const last4 = str.slice(-4)
console.log(last4) // ript

const last4Again = str.slice(str.length - 4)
console.log(last4Again) // ript

If you provide a start index greater than the string's length, the slice() method does not throw an error. Instead, it returns a copy of the original string:

const str = 'JavaScript'

const last20 = str.slice(-20)
console.log(last20) // JavaScript

In the above example, we tried to get the last 20 characters of the string by passing -20 as a negative start index, but the string 'JavaScript' contains only 13 characters. Hence, slice() returns the entire string.

Alternatively, you could also use the substring() method to get the last N characters of a string in JavaScript:

const str = 'JavaScript'

const last6 = str.substring(str.length - 6)
console.log(last6) // Script

The substring() method works similarly to slice() and returns a new string containing part of the original string specified using start and end indexes.

However, unlike slice(), the substring() method uses 0 as a start index if a negative number is passed as an argument:

const str = 'JavaScript'

const last4 = str.substring(-4)
console.log(last4) // JavaScript

Original article source at: https://attacomsian.com/

#javascript #character #string 

Remove The Last Character From A String in JavaScript

Remove The Last Character From A String in JavaScript

You can use the slice() and substring() methods to remove one or more characters from the end of a string in JavaScript.

Remove the last character from a string

You can use the slice() method to remove the last character from a string, passing it 0 and -1 as parameters:

const str = 'JavaScript'

const result = str.slice(0, -1)
console.log(result) // JavaScrip

The slice() method extracts a part of a string between the start and end indexes, specified as first and second parameters. It returns the extracted part as a new string and does not change the original string.

Indexes in JavaScript are zero-based. The first character in a string has an index of 0, and the last has an index of str.length - 1.

We passed -1 as an end index to the slice() method to exclude the last character t from the returned string. The negative index of -1 specifies that we want to skip the ending character and get a new string containing the rest.

Alternatively, you could use the substring() method to remove the last character from a string, as shown below:

const str = 'JavaScript'

const result = str.substring(0, str.length -1)
console.log(result) // JavaScrip

The substring() method extracts characters between the start and end indexes from a string and returns the substring.

Remove the last N characters from a string

You can also use the slice() method to remove the last N characters from a string in JavaScript:

const str = 'JavaScript'

const removed2 = str.slice(0, -2)
console.log(removed2) // JavaScri

const removed6 = str.slice(0, -6)
console.log(removed6) // Java

const removed9 = str.slice(0, -9)
console.log(removed9) // J

The substring() method can also be used to remove the last N characters from a string:

const str = 'JavaScript'

const removed4 = str.substring(0, str.length - 4)
console.log(removed4) // JavaSc

Original article source at: https://attacomsian.com/

#javascript #string #remove #character 

Transform The Character Case Of A String in JavaScript

In this tutorial, you’ll learn how to transform the character case of a string — to uppercase, lowercase, and title case — using native JavaScript methods.

JavaScript provides many functions and methods that allow you to manipulate data for different purposes. We’ve recently looked at methods for converting a string to a number and a number to a string or to an ordinal, and for splitting strings. This article will present methods for transforming the character case of a string — which is useful for representing strings in a certain format or for reliable string comparison.

Transform a String to Lowercase

If you need your string in lowercase, you can use the toLowerCase() method available on strings. This method returns the string with all its characters in lowercase.

For example:

const str = 'HeLlO';
console.log(str.toLowerCase()); // "hello"
console.log(str); // "HeLlo"

By using toLowerCase() method on the str variable, you can retrieve the same string with all the characters in lowercase. Notice that a new string is returned without affecting the value of str.

Transform a String to Uppercase

If you need your string in uppercase, you can use the toUpperCase() method available on strings. This method returns the string with all its characters in uppercase.

For example:

const str = 'HeLlO';
console.log(str.toUpperCase()); // "HELLO"
console.log(str); // "HeLlo"

By using toUpperCase() method on the str variable, you can retrieve the same string with all the characters in uppercase. Notice that a new string is returned without affecting the value of str.

Transform a String to Title Case

The most common use case for transforming a string’s case is transforming it to title case. This can be used to display names and headlines.

There are different ways to do this. One way is by using the method toUpperCase() on the first character of the string, then concatenating it to the rest of the string. For example:

const str = 'hello';
console.log(str[0].toUpperCase() + str.substring(1).toLowerCase()); // "Hello"

In this example, you retrieve the first character using the 0 index on the str variable. Then, you transform it to uppercase using the toUpperCase() method. Finally, you retrieve the rest of the string using the substr() method and concatinate the rest of the string to the first letter. You apply toLowerCase() on the rest of the string to ensure that it’s in lowercase.

This only transforms the first letter of the word to uppercase. However, in some cases if you have a sentence you might want to transform every word in the sentence to uppercase. In that case, it’s better to use a function like this:

function toTitleCase (str) {
  if (!str) {
    return '';
  }
  const strArr = str.split(' ').map((word) => {
    return word[0].toUpperCase() + word.substring(1).toLowerCase();
  });
  return strArr.join(' ');
}

const str = 'hello world';
console.log(toTitleCase(str)); // "Hello World"

The toTitleCase() function accepts one parameter, which is the string to transform to title case.

In the function, you first check if the string is empty and in that case return an empty string.

Then, you split the string on the space delimiter, which returns an array. After that, you use the map method on the array to apply the transformation you saw in the previous example on each item in the array. This transforms every word to title case.

Finally, you join the items in the array into a string by the same space delimiter and return it.

Live Example

In the following CodePen demo, you can try out the functionality of toLowerCase() and toUpperCase(). When you enter a string in the input, it’s transformed to both uppercase and lowercase and displayed. You can try using characters with different case in the string.

Changing Character Case for String Comparison

In many situations, you’ll need to compare strings before executing a block of code. If you can’t control the character case the string is being written in, performing comparison on the string without enforcing any character case can lead to unexpected results.

For example:

const input = document.querySelector('input[type=text]');
if (input.value === 'yes') {
  alert('Thank you for agreeing!');
} else {
  alert('We still like you anyway')
}

If the user enters in the input Yes instead of yes, the equality condition will fail and the wrong alert will show.

You can resolve this by enforcing a character case on the string:

const input = document.querySelector('input[type=text]');
if (input.value.toLowerCase() === 'yes') {
  alert('Thank you for agreeing!');
} else {
  alert('We still like you anyway')
}

Conclusion

It’s necessary to learn how to transform the character case of a string in JavaScript. You’ll often need to use it for many use cases, such as displaying the string in a certain format. You can also use it to reliably compare strings.

Enforcing a character case on the strings you’re comparing ensures that you can check if the content of the strings are equal, regardless of how they’re written.

Original article source at: https://www.sitepoint.com/

#javascript #transform #character #string 

OpenSoundControl.jl: Open Sound Control for Julia

OSC.jl -- Implementation of the Open Sound Control Serialization Format

OSC.jl provides an implementation of the OSC binary format commonly used in networked control of musical applications. The code is based on a relatively straightforward translation of librtosc(https://github.com/fundamental/rtosc)

Sample Usage

i = Int32(          42         ); #integer
f = Float32(        0.25;      ); #float
s =                "string"       #string
b =                 s;            #blob
h = Int64(          -125;      ); #long integer
t = UInt64(         22412;     ); #timetag
d = Float64(        0.125;     ); #double
S =                 "Symbol"      #symbol
c = Char(           'J'        ); #character
r = Int32(          0x12345678 ); #RGBA
m = Array{UInt8,1}( [0x12,0x23,   #midi
                     0x34,0x45]);
#true
#false
#nil
#inf

msg = OscMsg("/dest", "[ifsbhtdScrmTFNI]", i,f,s,b,h,t,d,S,c,r,m);
show(msg)

This produces:

OSC Message to /dest
    Arguments:
    # 1 i:Int32 - 42
    # 2 f:Float32 - 0.25
    # 3 s:String - string
    # 4 b:Blob - Uint8[115 116 114 105 110 103]
    # 5 h:Int32 - -125
    # 6 t:Uint64 - 22412
    # 7 d:Float64 - 0.125
    # 8 S:Symbol - Symbol
    # 9 c:Char - J
    #10 r:RBG - 305419896
    #11 m:Midi - Uint8[18 35 52 69]
    #12 T: - true
    #13 F: - false
    #14 N:Nothing - nothing
    #15 I:Inf - nothing

Accessing the fields is done via the [] operator.

Networked Usage

Most of the usage is going to involve sending the OSC messages over UDP to another program. To do this, first start two julia instances. In the first one run

using Sockets
using OpenSoundControl
sock2 = UDPSocket()
bind(sock2, ip"127.0.0.1", 7777)
msg2 = OscMsg(recv(sock2))
show(msg2)

The first instance will now wait for the second to send an OSC message. To send the an OSC message, in the second window type.

using Sockets
using OpenSoundControl
sock1 = UDPSocket()
msg1 = OpenSoundControl.message("/hello world", "sSif", "strings", "symbols", Int32(234), Float32(2.3))
send(sock1, ip"127.0.0.1", 7777, msg1.data)

TODO

• Port bundle message support from librtosc

Download Details:

Author: fundamental
Source Code: https://github.com/fundamental/OpenSoundControl.jl 
License: LGPL-3.0 license

#julia #open

Character data type in Rust || Char || Rust Programming

In this video we will study about character or char data type in Rust. These are Unicode values and 4 Bytes in length.

#Rust #char #rustlang #cargo

#rust #character #rustlang

Character Count In Textarea

In this small tutorial i will explain you how to count characters from textarea, many time client’s have requirments like they have to add some number of character in specific field and after that user can not add any data in this field , at that time we can dispaly count of character So, user can manage his/her content in text area.

here, we will add some piece of HTML code with textarea and in the bottom we will add Jquery code in script tag that’s it.

Read More : Character Count In Textarea

https://websolutionstuff.com/post/character-count-in-textarea

Read Also : How To Generate QRcode In Laravel

https://websolutionstuff.com/post/how-to-generate-qrcode-in-laravel

#javascript #jquery #php #character #count #textarea

Escape Characters in Java

Learn how we can use escape sequence in Java

These characters can be any letters, numerals, punctuation marks and so on. The main thing when creating a string is that the entire sequence must be enclosed in quotation marks:

public class Main {
   public static void main(String[] args) {
       String alex = new String ("My name is Alex. I'm 20!");
   }
}

#escapesequenceforspace #character #java #string

The Process , In essence, follow the process.

We humans are creatures of habit. During our younger years, our parents, peers, and institutions help in shaping our characters by influencing our habits through repetitive processes. However, as we become more independent, we fail to develop new habits. This hinders us from becoming better because we easily fall back to taking the easy route.

Photo by Roger van de Kimmenade on Unsplash

Although the easy route may get us to our destination faster, we may miss the opportunity to obtain great experiences that serve as a stepping stone for greater things to come.

Few weeks ago, I read a DevOps novel by Gene Kim, Kevin Behr, and George Spafford called “The Phoenix Project”.In the novel, the DevOps process was portrayed together with the problem of not standardizing IT processes within an organization. What intrigues me is the amount of “unplanned work” changes that do not follow due processes can cause.

For some people, they feel following the process limits them or makes them follow the long route but in essence, it helps to standardize the procedure, enable others follow through and understand the person’s thought process, and helps to reverse changes easily.

Basically, proper documentation is important. Most Systems and IT people do not like to document their work because it feels like the irrelevant aspect of the work itself. However, it enables others follow through your work easier while preventing wasted time trying to explain how things work under the hood because you can easily refer to the documentation.

#devops #documentation #character #process #habits