Replace text with underscore depending on its length

Question

I want to make a simple tool to replace the selected text for gaps/underscore. I already have that functionality, but I´d like to improve it, making the underscores be as many as the characters that the selected text has (including spaces).

It isn't a duplicate because the idea is to make it the same way the JSFiddle works; It has to take the selected text, and replace it there, like the JSFiddle.

Current JS:

$(document).ready(function() {
      $('#btn_convert_to_gaps').click(function() {
        document.execCommand('insertText', true, "________");
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <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>

JSFiddle Demo

Example:

"This sentence"
I select "is se", and I expect:
"Th_____ntence" (the same sentence with 5 underscores)

Your example is self referential. Please clarify it, had to read it twice for it to make sense. — Tibrogargan, Nov 04 '16 at 21:22
@LoganMurphy You're right. Updated JSFiddle and example. And it isn't a duplicate because I'm asking specifically to do it like it works on the JSFiddle... — RominaV, Nov 04 '16 at 21:49
@Tibrogargan the possible duplicate **doesn't remotely address** 1) how to **know the selected text length** nor 2) how to **replace selected text** with another one. — RominaV, Nov 04 '16 at 23:35
@RominaV but the other links in my question address 1) length - which are really "how do I get the current text selection" + "how do I get the length of a string". As for 2) Your question states you can already replace text, so why do you need an explanation of how to do that? From the execCommand documentation: "insertText: Inserts the given plain text at the insertion point (deletes selection)" — Tibrogargan, Nov 04 '16 at 23:41

score 1 · Answer 1 · edited May 23 '17 at 10:30

1

This does what you asked for, adapted from Repeat Character N Times

function replaceWithUnderscores(text, term) {
    return text.replace(term, Array(term.length).join('_'));
}
console.log(replaceWithUnderscores("this sentence", "is se"));

This question describes how to get a text selection: Get the Highlighted/Selected text This question discusses how to do the same (but from a textarea): How to get selected text from textbox control with javascript

$(document).ready(function() {
    $('#btn_convert_to_gaps').click(function() {
        var term = window.getSelection().toString();
        document.execCommand('insertText', true, Array(term.length).join('_'));
    });
});

edited May 23 '17 at 10:30

Community

1
1

answered Nov 04 '16 at 21:21

Tibrogargan

3,599
3
16
33

1

The implied question is how to get the text length from user selection. The text to be replaced is not always "is se". – JJJ Nov 04 '16 at 21:25
@JJJ With `term.length`? I'm not sure what you mean. This code works for any pair of strings. – 4castle Nov 04 '16 at 21:27
Yes, but what is `term` in the OP's code? They try to replace user selection in a contenteditable div. How do they get that text to `term`? – JJJ Nov 04 '16 at 21:29
@JJJ [Like this](http://stackoverflow.com/a/24309486/5743988) – 4castle Nov 04 '16 at 21:31
@JJJ the answer shows how to accomplish the desired result with the example provided by the OP, but I'll pander to your double standard and turn it into a function – Tibrogargan Nov 04 '16 at 21:40
1

Sorry, but you misunderstood my comment – whether it's a function was never an issue. If you can edit the OP's jsfiddle to include your answer, that would be great. – JJJ Nov 04 '16 at 21:43
The edit looks really good. Good work! – JJJ Nov 04 '16 at 21:45
1

@JJJ this question could have been solved with trivial amounts of research. The edit is simply pandering to your demands. The edit is certainly not "great", since it only shows how to solve the problem in the general case. The linked questions have more complete, cross browser solutions that should not be duplicated here. – Tibrogargan Nov 04 '16 at 21:47

score 0 · Answer 2 · answered Nov 04 '16 at 22:19

You may try this approach. The whole idea is to create the entire string to be replaced with using the length of the characters in the selected text.

  var charToReplaceWith = '_';  // configurable
  $('#btn_convert_to_gaps').click(function() 
  {     
     var i = 1;
     var textToReplaceWith = charToReplaceWith; // declare a local variable that would replace the selection with
     while( i < window.getSelection().toString().length) // iterate through the length and build the replace text, this would also take care of spaces
     {
       textToReplaceWith += charToReplaceWith;
       i++;
     }     
     $("#fake_textarea").text($("#fake_textarea").text().replace(window.getSelection(),textToReplaceWith));       
  });

Example : https://jsfiddle.net/96b6tq7c/5/

Replace text with underscore depending on its length

2 Answers2