Text to gaps

Converts selected text to gaps/underscores

HTML

<button id="btn_convert_to_gaps"><b>Convert selected to gaps</b></button>
<div id='fake_textarea' contenteditable>
  Select some text and click the button to make it bold...
  <br>Or write your own text
</div>

CSS

#fake_textarea {
  width: 100%;
  height: 200px;
  border: 1px solid red;
}

button {
  font-weigth: bold;
}

JavaScript

var charToReplaceWith = '_';
  $('#btn_convert_to_gaps').click(function() 
  {     
     var i = 1;
     var textToReplaceWith = charToReplaceWith;
     while( i < window.getSelection().toString().length)
     {
       textToReplaceWith += charToReplaceWith;
       i++;
     }     
     $("#fake_textarea").text($("#fake_textarea").text().replace(window.getSelection(),textToReplaceWith));       
  });