替换文本区域中每个选定行上的文本答案

【问题标题】：Replace text on every selected line in a textarea替换文本区域中每个选定行上的文本
【发布时间】：2015-06-28 13:49:35
【问题描述】：

我的 HTML 中有一个文本区域，用户可以在其中输入内容。在 textarea 附近有一个按钮，可以在所选行的开头添加一个“ - ”，使其像一个列表。

例如，如果我有以下文本：

This is a line of text

然后我全部选中并按下按钮，它会显示如下：

- This is a line of text

但是，这仅在选择一行时有效。如果我要选择两行，它只会格式化一行。这是我的代码：

带有一些 jQuery 的 JavaScript：

var selection = $("#answer" + questionNumber).getSelection();
if (selection.text != '') {
    $("#answer" + questionNumber).replaceSelectedText('  - ' + selection.text);
    return;
}

.getSelection() 和 .replaceSelectedText() 方法来自 this jQuery 插件。

虽然我可能通过识别选择中是否有 '\n' 然后将列表样式添加到其中，可能使用正则表达式，但我不确定如何进行编码。

Here 是我的问题的 JSFiddle。

【问题讨论】：

你能创建一个fiddle或plunker吗？
@A.J 我尝试制作一个jsfiddle.net/PavSidhu/s2o33zzj，但由于某种原因我无法在<script> 标签中导入所需的文件。
@PavSidhu 你在左边添加资源....
您的 jsfiddle 有一些错误，包括您试图在安全页面上的 iframe 中通过常规 http 加载脚本（如果您查看开发控制台，它甚至会警告您）。我已经清理了问题并分叉了你的小提琴here。
太棒了，谢谢@ttton

标签： javascript jquery regex textarea

【解决方案1】：

您当前的代码所做的只是将- 添加到所选文本的开头。如果您想在整个字符串中替换某些内容，JavaScript 的 replace 函数与正则表达式可能是一种简单的方法。试试：

var newText = selection.text.replace(/^/gm, '  - ');
$("#answer" + questionNumber).replaceSelectedText(newText);

我用proof of concept 调整了你的小提琴。

详情：

^ 字符与行首匹配。
/m 选项告诉 JavaScript 你关心多行 - 否则 ^ 只匹配字符串的开头。
/g 选项进行全局替换。也就是说，替换每一个匹配项，而不仅仅是第一个匹配项。

更多关于 JS 正则表达式的文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

【讨论】：

另外，（如果您设法回答，我会将其添加到问题中）是否有办法停止将“ - ”添加到已经存在的行中？
这可能值得单独提出一个问题，我建议您了解更多有关正则表达式的信息。 regex101.com/#javascript 是一个试验的好地方。 /^[^-\s]+/ 之类的内容不会匹配以空格和破折号开头的行：regex101.com/r/fU7rB0/1

【解决方案2】：

一个相当简单的解决方案是使用正则表达式替换所选文本中的所有换行符：

var replacementText = '  - ' + selection.text.replace(/\n(.*)/g, "\n  - $1");

这将搜索任何换行符 \n 字符，捕获其后行中的任何内容 (.*)，然后重新插入它并使用项目符号 - 分隔换行符和捕获的内容。 g 标志匹配所有情况。

有关工作示例，请参阅 this fiddle。

请注意，此解决方案应保留代码的大部分现有行为。一个怪癖是，如果您选择的最后一个字符是换行符，它会在下面的行中添加一个项目符号点，这可能是不可取的。要摆脱这种情况，您可以修改正则表达式，使其忽略与所选字符串结尾接壤的换行符 (example fiddle)：

// Includes a check to ignore newlines that are not followed
// by at least one character of any kind
selection.text.replace(/\n(?!$(?![\s\S]))(.*)/g, "\n  - $1")

我会让您自己弄清楚如何获得您想要的确切行为。上述示例至少应该可以帮助您入门。无论如何，我强烈建议重构替换逻辑并对其进行彻底的单元测试，以确保行为一致。

【讨论】：