根据长度用下划线替换文本[重复]答案

【问题标题】：Replace text with underscore depending on its length [duplicate]根据长度用下划线替换文本[重复]
【发布时间】：2017-03-18 19:51:15
【问题描述】：

我想制作一个简单的工具来替换所选文本的空白/下划线。我已经拥有该功能，但我想改进它，使下划线与所选文本所具有的字符一样多（包括空格）。

它不是重复的，因为 我们的想法是让它与 JSFiddle 的工作方式相同；它必须采用选定的文本，并在那里替换它，就像 JSFiddle 一样。

当前 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

例子：

“这句话”
我选择“is se”，我希望：
“Th_____ntence”（同句，5个下划线）

【问题讨论】：

您的示例是自引用的。请澄清一下，必须阅读两次才能有意义。
你没有在你的小提琴中导入 jquery
@LoganMurphy 你是对的。更新了 JSFiddle 和示例。而且它不是重复的，因为我特别要求这样做，就像它在 JSFiddle 上一样......
@Tibrogargan 可能的重复无法远程解决 1）如何知道所选文本长度也不 2）如何替换所选文本与另一个文本。
@RominaV 但我的问题地址中的其他链接 1) 长度-实际上是“如何获取当前文本选择”+“如何获取字符串的长度”。至于2）您的问题表明您已经可以替换文本，那么为什么需要解释如何做到这一点？来自 execCommand 文档：“insertText：在插入点插入给定的纯文本（删除选择）”

标签： javascript jquery html execcommand

【解决方案1】：

这符合你的要求，改编自Repeat Character N Times

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

这个问题描述了如何获得文本选择：Get the Highlighted/Selected text 这个问题讨论了如何做同样的事情（但来自文本区域）：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('_'));
    });
});

【讨论】：

隐含的问题是如何从用户选择中获取文本长度。要替换的文本并不总是“is se”。
@JJJ 与term.length?我不确定你是什么意思。此代码适用于任何一对字符串。
是的，但是 OP 代码中的 term 是什么？他们尝试在内容可编辑的 div 中替换用户选择。他们如何将该文本发送到term？
抱歉，您误解了我的评论——它是否是一个函数从来都不是问题。如果您可以编辑 OP 的 jsfiddle 以包含您的答案，那就太好了。
@JJJ 这个问题可以通过少量的研究来解决。编辑只是迎合您的要求。编辑当然不是“很好”，因为它只显示了在一般情况下如何解决问题。链接的问题有更完整的跨浏览器解决方案，此处不应重复。

【解决方案2】：

您可以尝试这种方法。整个想法是使用所选文本中字符的长度创建要替换的整个字符串。

  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));       
  });

例如：https://jsfiddle.net/96b6tq7c/5/

【讨论】：