How to reverse the text by using Javascript?

Question

I am trying to write code to reverse my text. Ex: Apple is Fruit --> Fruit Is Apple. I written code which is not working. Thanks for the help!

JSFiddle

<html>
<body>
  <center>
    <form>
      <textarea autocomplete="off" cols="30" id="TextInput1" name="message" rows="5" style="border: 3px solid #73AD21; width: 40%;"></textarea>
      <textarea autocomplete="off" cols="30" id="TextInput2" name="message" rows="5" style="border: 3px solid #73AD21; width: 40%;"></textarea><br />
      <input id="WhiteSpaceRemove" onclick="myFunction()" style="border: 3px solid #73AD21;" type="button" value="Convert" />
    </form>
  </center>
  <script>
    function myFunction() {
      var x = document.getElementById("TextInput1").value;

      document.getElementById("TextInput2").innerHTML = x.reverse();
      document.getElementById("CopyButton").value = "Copy Text!";
    }
  </script>
</body>
</html>

@CodeManiac OP is not looking to reverse the order of every character in the string, but to reverse the word order. — Terry, Mar 22 '20 at 11:19
@Terry splitting with space does the trick `x.split(' ').reverse().join(' ')` — Code Maniac, Mar 22 '20 at 11:20

score 4 · Accepted Answer · answered Mar 22 '20 at 11:16

The reverse() method only exists on the array prototype. Since you want to reorder them in groups of words (and not by character), you will need to split x by an empty space, and then rejoin it thereafter:

document.getElementById("TextInput2").innerHTML = x.split(' ').reverse().join(' ');

This basically splits your sentence up into individual words, and then rejoins it in a reverse order after that.

See proof-of-concept:

function myFunction() {
  var x = document.getElementById("TextInput1").value;

  document.getElementById("TextInput2").innerHTML = x.split(' ').reverse().join(' ');
}

<form>

  <textarea autocomplete="off" cols="30" id="TextInput1" name="message" rows="10" style="border: 3px solid #73AD21; width: 40%;">Lorem ipsum dolor sit amet</textarea>

  <textarea autocomplete="off" cols="30" id="TextInput2" name="message" rows="10" style="border: 3px solid #73AD21; width: 40%;"></textarea><br />

  <input id="WhiteSpaceRemove" onclick="myFunction()" style="border: 3px solid #73AD21;" type="button" value="Convert" />

</form>

How to reverse the text by using Javascript?

1 Answers1