How to create text come one by one and go back to fix the spelling

Question

I have inserted a text inside the placeholder.And it's working properly.Now After appearing the text, I want the cursor to go to a specific point(here doubts) and correct the misspelled word(doubts to doubt).

How to do it ? Can you show me any example I want to do in the project.

Code###

var txt = "Please write your message.If any doubts, don't hesitate to make a questions !";
var timeOut;
var txtLen = txt.length;
var char = 0;
$('textarea').attr('placeholder', '|');
(function typeIt() {
  var humanize = Math.round(Math.random() * (200 - 30)) + 30;
  timeOut = setTimeout(function() {
    char++;
    var type = txt.substring(0, char);
    $('textarea').attr('placeholder', type + '|');
    typeIt();

    if (char == txtLen) {
      $('textarea').attr('placeholder', $('textarea').attr('placeholder').slice(0, -1)) // remove the '|'
      clearTimeout(timeOut);
    }

  }, humanize);
}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <textarea cols="50" rows="15" placeholder=""></textarea>
</form>

Answer 1

First, add another variable to hold the the modified, typo-free string so we can still iterate through the original. This new variable will be used to display text.

var modified_txt = "";

If you know the position in the string of the typo you can make an object of the position of the typos to check.

//Positions in the txt string where typos exist
var typos = {
  38: {},
  25: {}
}

As your char counter increases you can check it against the object.

var test = typos[char];
if (test !== undefined) {
  //Typo found do something with it
}

In this case I opted to write 2 new functions, 1 for adding characters and 1 for deleting them

function deleteCharacter(text) {
  text = text.substring(0, text.length - 1);
  return text;
}

function addCharacter(text, character_added) {
  text = text + character_added;
  return text;
}

I also decided to have one of the typo object properties be a function, so we can organize our typos and do what we want within the typo object.

var typos = {
  38: {
    error: 's',
    correction: function(text) {
      var temp = deleteCharacter(text);
      $('textarea').attr('placeholder', temp + '|');
      return temp;
    }
  }
}

Now we can make a function call when a typo is found.

if (test !== undefined) {
  //Typo found do something with it
  setTimeout(function() {
    var chunk_one = test.correction(modified_txt);
    modified_txt = chunk_one;
    char++;
    typeIt();
  }, humanize());
} else { //If no typos are found then move to the next character
  setTimeout(function() {
    char++;
    typeIt();
  }, humanize());
}

Full working code at codepen