When I try to reverse the words in a string, I am not receiving the desired order

Currently delving into TypeScript, I have set myself the task of crafting a function that takes in a string parameter and reverses each word within the string.

Here is what I aim to achieve with my output:

"This is an example!" ==> "sihT si na !elpmaxe"

The solution I've concocted involves steering clear of built-in methods.

export function reverseWords(str: string): string {
  var newStr = "";
  str.split("");
  for(var i = str.length -1; i >= 0; i--){
    newStr += str[i];
  }
  return newStr;
}

reverseWords("Hi. How are you?")

However, this code yields the following result:

 "This is an example!" ==> !elpmaxe na si sihT

What I am actually striving for is:

 "This is an example!" ==> "sihT si na !elpmaxe"

If anyone could shed some light on where I may be going awry, it would be greatly appreciated.

Answer №1

While your function is effective, it currently reverses the entire string instead of just the words within it. To address this, consider incorporating an additional function that utilizes your existing function to specifically reverse individual words:

export function reverseStringWords(str: string): string {
    var words = str.split(" ");
    var revWords = words.map(function(word){
        return reverseWords(word);    
    });
    return revWords.join(" ");
}

To enhance clarity and coherence within the code, you might want to rename your function as reverseWord. This adjustment will offer a more intuitive label in the given context.

Answer №2

If you don't wish to reverse the entire string, but instead reverse each word within the string while maintaining their relative positions, you can achieve this by first splitting the string by spaces and then reversing each substring:

const reverse = str => str
  .split(' ')
  .map(word => [...word].reverse().join(''))
  .join(' ');
console.log(reverse("This is an example!"));

Alternatively, if you prefer a manual approach, assuming that the use of split is acceptable:

const reverse = str => {
  const words = str.split(' ');
  const outWords = [];
  for (const word of words) {
    let letter = '';
    for (let i = word.length - 1; i >= 0; i--) {
      letter += word[i];
    }
    outWords.push(letter);
  }
  return outWords.join(' ');
};
console.log(reverse("This is an example!"));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Replacing a JSON vault using XHR: A step-by-step guide

Can someone assist me in replacing the JSON data from a JSON file on a website using JavaScript XHR? setagaya.json: {"trains":[{"operation_number":1,"line_id":26007,"station_id":784,"track_number":1,"up":true},{"operation_number":2,"line_id":26007,"stati ...

How can we prevent Material-UI and Redux-form from re-rendering when an option is clicked in the select input?

I am facing an issue with rendering options dynamically. Whenever I click on the select or the options, the component re-renders and changes the options. As a result, I need to click twice to select an option in the dropdown. This re-rendering is happening ...

A guide on integrating a submission button that combines values from multiple dropdown forms and redirects to a specific URL

Is there a way to make the submit button on this form act based on the combined values of two different dropdown menus? For instance, if "west" is selected from the first dropdown and "winter" is selected from the second dropdown, I want it to navigate to ...

Tips for switching out images depending on the time of day

Currently, I have a script that dynamically changes the background color of my webpage based on the time of day. However, I am facing issues trying to implement a similar functionality for replacing an image source. The current code is also time zone-based ...

The classification of a property is determined by the types of the other properties present

I am trying to figure out a way in Typescript to create a general component that takes a prop called component, with the remaining props being specific to that component. How can I achieve this? For example: <FormField component={Input} ... /> Thi ...

I encountered a blank page issue when incorporating ui.bootstrap into my controller within Angular

After attempting to utilize angular bootstrap in my project, I encountered an issue where adding the dependency in my controller and starting the server with grunt serve resulted in a blank page. Take a look at the bower components in the screenshot provid ...

Having trouble locating node_modules/nan on your system?

Trying to globally install this project is proving to be a challenge as I run the command npm i -g. Followed these steps: git clone https://github.com/superflycss/cli cd cli npm i npm i -g However, encountered this result: ole@mki:~/cli$ npm i -g npm W ...

Changing the order of a list in TypeScript according to a property called 'rank'

I am currently working on a function to rearrange a list based on their rank property. Let's consider the following example: (my object also contains other properties) var array=[ {id:1,rank:2}, {id:18,rank:1}, {id:53,rank:3}, {id:3,rank:5}, {id:19,r ...

Utilize the power of generics with Angular's service providers

Is it possible to make the membervar of class Parent generic instead of type any, while still retaining the ability to switch provider classes without having to update all components that rely on class Parent? For example, if class ChildB implements a diff ...

Utilize generics to define the data type of the output

Within my Angular service, there is a method that retrieves data from Sync Storage: getFromSyncStorage(key: string): Promise<Object | LastErrorType> { return new Promise(function (resolve, reject) { chrome.storage.sync.get(key, function ( ...

What are the steps to integrate mailjet into my Vue application?

I am looking to utilize mailjet for my contact form. I have installed it using "$ yarn add node-mailjet" and followed the steps provided. However, I am a bit confused about whether I am integrating mailjet correctly. Below is the code I am currently using: ...

What is the best way to prevent a fetch request from being initiated before the authentication token has been received

After successfully logging in, the data request fetch function needs to send the request with the saved token bearer. However, the data fetch is not waiting for the token and is receiving an Unauthorized access code. This is how my data request fetch func ...

Dynamic text displayed on an image with hover effect using JavaScript

Currently, I am in the process of developing a website for a coding course that is part of my university curriculum. The project specifications require the use of JavaScript, so I have incorporated it to display text over images when they are hovered over ...

Tips for resolving a 403 error and SSH connection issue on an Azure Web Service website

Recently, my web app created on Azure using Express and Node 18 worked perfectly during development locally. However, when I attempted to host it on an Azure web app, I encountered issues. The site failed to display anything and a 403 error was returned in ...

Only two options available: validate and hide; no additional options necessary

Having some trouble understanding the logic behind a JavaScript script that is meant to display select options based on another select option. Any tips on how to hide unused options? For example: If TV is selected, only show options for device, tsignal, b ...

Launching the forEach function within an ng-repeat loop was it can be done by

I need to implement a function within the ng-repeat that will convert the value of Qprogress object in my JSON into a percentage. I already have the function written, but I am struggling with how to trigger it. I attempted to use a forEach loop inside the ...

Tips for defining a distinct series of key-value pairs in typescript

Having experience with a different language where this was simple, I am finding it challenging to articulate a sequence of pairs: Each pair is made up of two basic elements (such as strings or numbers) Each element may appear multiple times within the lis ...

Tips on stopping the page from scrolling following an ajax request (return false not effective or potentially misplaced)

I am working on a project that involves displaying a tree with information from the Catalogue of Life, including details such as Kingdom, phylum, order, and more. My approach includes using ajax/php to interact with a mySQL database and javascript to handl ...

Managing clicks outside of the render function

I'm brand new to using React and I'm currently exploring how to properly manage an event handler outside of the Return() function within a component. If there's a more efficient or conventional way to do this, I'm definitely open to sug ...

No duplication of Collada material present

I imported a collada model (.dae) into Three.js and encountered an issue with the object's material. Ideally, the material should appear as follows: However, it currently looks like this: The color is not an issue; I can modify the lighting within t ...