textarea选中文本转星号：空格不替换、计数异常及防重复替换求助

我来帮你搞定这三个问题，咱们一步步调整代码，解决每个痛点：

问题分析与修复思路 #

1. 选中的空格不替换为星号：原来的代码会把所有选中内容（包括空格）都换成星号，现在需要逐个字符判断，只把非空格字符替换成星号，空格保留。
2. 星号计数不一致：之前用Array(n).join("*")会生成n-1个星号（比如选中3个字符只生成2个星号），改用遍历处理的方式，保证替换后的长度和原选中文本完全一致。
3. 星号被选中时不再替换：在执行替换前先检查选中的文本里是否包含星号，如果有就直接退出操作；同时在选中事件里，如果选中的是星号，就不显示替换按钮。

修改后的完整代码 #

function getSel() { 
  // 获取textarea元素
  var txtarea = document.getElementById("mytextarea"); 
  // 获取选中文本的起始和结束索引
  var start = txtarea.selectionStart; 
  var finish = txtarea.selectionEnd; 
  // 获取所有文本内容
  var allText = txtarea.value; 
  // 获取当前选中的文本
  var selectedText = allText.substring(start, finish);

  // 问题3：如果选中的文本包含星号，不执行替换操作
  if (selectedText.includes('*')) {
    $('#newpost').hide();
    return;
  }

  // 问题1：遍历选中的每个字符，空格保留，非空格替换为星号
  var replacedText = selectedText.split('').map(char => {
    return char === ' ' ? ' ' : '*';
  }).join('');

  // 拼接新文本并赋值给textarea
  var newText = allText.substring(0, start) + replacedText + allText.substring(finish); 
  txtarea.value = newText; 
  $('#newpost').hide(); 
} 

$(document).ready(function () { 
  var position; 
  $('#newpost').hide(); 

  $('#mytextarea')
    .on('select', function (e) { 
      var txtarea = this;
      var start = txtarea.selectionStart; 
      var finish = txtarea.selectionEnd; 
      var selectedText = txtarea.value.substring(start, finish);

      // 如果没有选中文本，或者选中的文本包含星号，隐藏按钮
      if (start === finish || selectedText.includes('*')) {
        $('#newpost').hide();
        return;
      }

      // 生成预览的替换文本（空格保留，非空格为星号）
      var previewText = selectedText.split('').map(char => char === ' ' ? ' ' : '*').join('');
      $('#newpost p').text(previewText);
      $('#newpost').offset(position).show(); 
    })
    .on('mousedown', function (e) { 
      // 记录鼠标位置，用于定位替换按钮
      position = { top: e.pageY - 5, left: e.pageX }; 
    }); 
});

关键修改点说明 #

• 空格保留：通过split('').map(...)遍历每个字符，只替换非空格字符，完美保留原空格位置和数量。
• 计数准确：替换后的文本长度和原选中文本完全一致，彻底解决星号计数不一致的问题。
• 禁止重复替换星号：在getSel函数和select事件里都加入了星号检测，既不会触发无效替换操作，也不会显示多余的替换按钮，从源头避免重复替换。

内容的提问来源于stack exchange，提问作者pbsbr