Question

我的HTML中有一个textarea，用户可以输入内容。 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。

Answer 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

Answer 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")

我会让你知道如何获得你想要的确切行为。以上示例应该可以帮助您至少开始。无论如何，我强烈建议重构替换逻辑并对其进行单元测试，以确保一致的行为。

替换textarea中每个选定行上的文本

2 个答案: