You will know how to split string and trim surrounding spaces in JavaScript via a variety of methods, namely split(), map() and trim(). These skills must be taken into consideration if you are working with strings in Javascript.
Split string and trim surrounding spaces in JavaScript
Using split(), map() and trim()
The split() method converts a string to an array of substrings based on a separator. You can find its syntax and usage here. The map() method creates a new array by calling a function on every element in the calling array. Here defines its syntax and usage. The trim() method will trim (remove) the surrounding spaces of a string.
Syntax:
trim()
These introduced methods work on an array in JavaScript, so you need to call them on an array. For example:
let text = ' Hello everyone, welcome to our page, Learn Share IT ';
// Split string separated by a comma
let substrings = text.split(',');
// Trim surrounding spaces in every element (every substring)
let res = substrings.map(s => s.trim());
console.log(res);Output:
['Hello everyone', 'welcome to our page', 'Learn Share IT']The above example shows that we have a string with surrounding spaces (at the beginning and at the end). We first split the strings into an array of substrings using split(),and then we used map(), which calls the trim() method on every element of the array in order to trim surrounding spaces. The result is an array of trimmed substrings.
Using lodash _.split(), _.trim and _.map()
This method needs importing from a library named lodash. You have to import this library by inserting this <script> tag on your page:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>Syntax:
_.map(arr, foo)
- arr: the array containing the split strings.
- Foo: the function to apply to each element in the array
This _.map() method also returns an array as the previous solution. You can read the _.split() method here. Let’s see how we achieve this using a lodash library:
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script type="text/javascript">
let text = ' Hello everyone, welcome to our page, Learn Share IT ';
// Split string separated by a comma
let substrings = _.split(text, ',');
// Trim surrounding spaces in every element (every substring)
let res = _.map(substrings, _.trim);
document.body.innerText += res;
</script>
</body>
</html>Output:
Hello everyone,welcome to our page,Learn Share ITHave you recognized the differences between the methods of lodash and the built-in methods? In the first approach, the split() and map() methods require only 1 argument, whereas, in the lodash, these methods require two arguments. Although this solution may need to import an external library, it also gives out the expected results as the first one.
Note that the result (“res” variable) in this example is an array, it is converted automatically to a string by the system machine; therefore the substrings (the elements of the array) are separated by a comma (default delimiter) as displayed.
Summary
We have discovered how to split string and trim surrounding spaces in JavaScript using a couple of different ways. We suggest you use the first approach as it doesn’t require a library. With the use of our guide in this tutorial, you can be successful in achieving the task.
Maybe you are interested:
- Split a String by the Last Dot using JavaScript
- Split a String on Capital Letters using JavaScript
- Trim all Strings in an Array using JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R