• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / Reverse Words in a String JavaScript

Reverse Words in a String JavaScript

May 15, 2022 Leave a Comment

We can easily reverse words in a string in JavaScript using the JavaScript split(), reverse() and join() methods. Below is a function we will create to reverse words in a string.

function reverseWords(str){
  var newString = str.split(" ");
  newString.reverse();
  newString = newString.join(" ");
  return newString;
};

Here is the function in use with an example string:

function reverseWords(str){
  var newString = str.split(" ");
  newString.reverse();
  newString = newString.join(" ");
  return newString;
};

var someString = "This is an example string with words";
console.log(reverseWords(someString));

#Output:
words with string example an is This

When using string variables in JavaScript, we can easily perform string manipulation to change the values or order of the words in our string.

One such manipulation is to reverse the words in a string.

To reverse the words in a string, we can first use the split() method to get an array of each word in the string, and then use the reverse() method to return the array with all of the items in reverse.

After reversing the array we then join the words together using the JavaScript join() method.

Below is our function once again on how to reverse the words in a string using JavaScript.

function reverseWords(str){
  var newString = str.split(" ");
  newString.reverse();
  newString = newString.join(" ");
  return newString;
};

Reversing Each Word in a String Using JavaScript

If you are looking to reverse each word in a string, we can modify our examples from above slightly. Instead of reversing the order of the words, we will reverse the letters of each word.

In this case, we will split() the string to get each word, and then loop over each word and reverse it with string slicing.

We have a post on reversing a string, it basically uses the same idea as our function above.

Below is an example of how to reverse each word in a string with JavaScript.

function reverseEachWord(str){
    var newStringArr = str.split(" ");
    for ( var i=0; i<newStringArr.length; i++){
      newStringArr[i] = newStringArr[i].split("");
      newStringArr[i].reverse();
      newStringArr[i] = newStringArr[i].join("");
    }
    newStringArr = newStringArr.join(" ");
    return newStringArr;
};

And here is the function in use with an example string:

function reverseEachWord(str){
    var newStringArr = str.split(" ");
    for ( var i=0; i<newStringArr.length; i++){
      newStringArr[i] = newStringArr[i].split("");
      newStringArr[i].reverse();
      newStringArr[i] = newStringArr[i].join("");
    }
    newStringArr = newStringArr.join(" ");
    return newStringArr;
};

var someString = "This is an example string with words";
console.log(reverseEachWord(someString));

#Output:
sihT si na elpmaxe gnirts htiw sdrow

Hopefully this article has been helpful for you to learn how to reverse words in a string using JavaScript.

Other Articles You'll Also Like:

  • 1.  Remove Special Characters From String in JavaScript
  • 2.  Using JavaScript to Get Image Dimensions
  • 3.  Using JavaScript to Get a Random Number Between Range of Numbers
  • 4.  Using Javascript to Check if Value is Not Undefined
  • 5.  How to Get the First Character of a String in JavaScript
  • 6.  Using JavaScript to Remove the Last Character From a String
  • 7.  Using JavaScript to Convert Double to Integer
  • 8.  JavaScript onfocusout – How to Use the onfocusout Event on an HTML Form
  • 9.  JavaScript Check if Attribute Exists in HTML Element
  • 10.  Using JavaScript to Remove Apostrophe From a String

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy