How To Replace All Hyphens In A String In JavaScript

Posted on by Tom Joseph
replace all hyphens in a string in Javascript

String is an object type supported with various built-in functions to aid user’s work. This tutorial will discuss methods to replace all hyphens in a string in JavaScript and provide additional information.

Replace all Hyphens in a String in JavaScript

Solution 1: Using replace() and replaceAll()

Both methods to replace all hyphens in a string are viable within JavaScript’s capabilities. Each of them will return the string being passed in after modification and will not directly mutate the initial one. However, replace() only acts on the first matching instance it encounters. 

First, we will give the syntax of replaceAll() and try an example:

replaceAll (pattern, replacement)

Parameters:

  • Pattern: A string or an object or a Regular Expression with the global (g) flag
  • Replacement: Be a string or a function. For functions, it can be invoked for every match and its return value as replacement text. Various replacement patterns are supported.

Example:

var str = "this-tutorial-in-JS";
str1 = str.replaceAll('-' , ' ');
console.log(str1);

Output:

this tutorial in JS

Same parameters and semantics from replaceAll() is applied for string.replace(). In this tutorial, we will pass Regular Expression into this function, making it check every instance resemble the given pattern:

// passing a substring
var str1 = "checks-the-first-instance";
str2 = str1.replace('-', ' ');
console.log(str2);

Output:

checks the-first-instance

Or:

// using Regular Expression
var str2 = "replace-all-instances";
str3 = str2.replace(/-/g, ' ');
console.log(str3);

Output:

replace all instances

The code shown above uses a Regular Expression /-/ created from a simple pattern made from the symbol “-“ and a flag (g) that enables global searching, in this objective, to evaluate every possible match in the target string in JavaScript.

Regular Expression is used to find a direct match, including literal characters that occur in an exact constructed sequence. Supposing we have a simple pattern /abc/. This pattern will allow a match in both “Do you know the abc’s latest news?” and “grab carb” but not for the “abc” due to an existing “ab c” being contained in the later string.

Check out this document about Regular Expression for more uses and flags that might help you.

Solution 2: Using split() and join()

Split() is a preset function for string handling in JavaScript. It divides a string into an ordered list of substrings by searching for the pattern and returns an array of substrings.

Syntax:

split(separator, limit)

Parameters:

  • Separator: (optional) A string or an object. If undefined, the initial string is returned wrapped in an array.
  • Limit: (optional) A non-negative integer indicating the number of substrings to include in the to-be-returned array. All leftover text after the limit will be removed.
    • An array may contain fewer members than limit 
    • If limit = 0 , split() returns []

In this approach, we also use array.join() to convert an array (or array-like object) into a string as its return type. The conjoined string will have the previous array’s elements separated by commas or a specified separator string.

join(separator)
  • The separator is optional. If absent, the contents will be separated by commas.

With our objective of specifically removing all hyphens from an input string, this method should be executed as such:

var str3 = "all-hyphens-are-removed";
str4 = str3.split('-').join(" ");
console.log(str4);

Output:

all hyphens are removed

Summary

Both replace() and replaceAll() will give the same results given the precise expression. For future usage, we recommend checking more about Regular Expression in JavaScript to replace all hyphens in a string in Javascript. The application of string.split() and array.split() in this article amplifies the versatility of handling strings and arrays correspondingly, which will help your upcoming projects.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *