如何在JavaScript中为选中文本的每一行前插入内容

嘿，我来帮你搞定这个需求！结合你现有的选中内容处理逻辑，我们可以轻松实现给选中文本每一行前插入指定内容的功能，具体方案如下：

核心思路 #

• 先获取用户选中的文本，按目标分隔符（默认是换行符，你提到的/g也可替换）分割成单独条目
• 对每个条目（可过滤空条目）拼接上要插入的前置内容
• 用处理后的文本替换掉原本的选中区域，还可以优化用户体验——自动重新选中修改后的内容

具体代码实现 #

基于你现有的选中操作逻辑，我们扩展出专门的处理函数：

function prependToEachLine(prependText, separator = '\n') {
  if (!window.getSelection) return; // 兼容不支持getSelection的老旧浏览器
  
  const sel = window.getSelection();
  const selectedText = sel.toString().trim();
  
  if (!selectedText) {
    alert('请先选中要处理的文本哦！');
    return;
  }
  
  if (sel.rangeCount > 0) {
    const range = sel.getRangeAt(0);
    range.deleteContents(); // 清除选中的原有内容
    
    // 按指定分隔符拆分文本，默认用换行符，需/g分隔就传'/g'作为第二个参数
    const lines = selectedText.split(separator);
    // 给每一行添加前置内容，保留原分隔符
    const processedText = lines.map(line => {
      // 可选：只给非空行加前置内容，不需要的话直接返回`${prependText}${line}`即可
      return line.trim() ? `${prependText}${line}` : line;
    }).join(separator);
    
    // 创建文本节点并插入到选中位置
    const textNode = document.createTextNode(processedText);
    range.insertNode(textNode);
    
    // 重新选中处理后的文本，方便用户后续操作
    sel.removeAllRanges();
    range.selectNodeContents(textNode);
    sel.addRange(range);
  }
}

代码细节说明 #

• 分隔符灵活切换：默认按换行符分割行，如果你的场景是文本以/g分隔，调用时传入第二个参数即可：prependToEachLine('a. ', '/g')
• 空行过滤：代码里加了line.trim()的判断，避免给空行也添加前置内容，不需要的话直接删掉这个判断就行
• 体验优化：处理完成后自动选中修改后的文本，用户不用手动重新选择，更流畅

调用示例 #

比如要给每一行前插入引用符号> ：

prependToEachLine('> ');

如果是按/g分隔的文本，要插入编号前缀a. ：

prependToEachLine('a. ', '/g');

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