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

Question

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

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

This is a line of text

然后我 select 编辑了所有内容并按下按钮，它看起来像这样：

- This is a line of text

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

Javascript 和一些 jQuery:

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

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

虽然我可能通过确定 selection 中是否有“\n”然后向其添加列表样式，也许使用正则表达式，但我不确定如何进行编码。

Here 是我的问题的 JSFiddle。

Answer 1

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

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

我已经用 proof of concept 调整了你的 fiddle。

详情：

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

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

Answer 2

A fairly straightforward solution is to use a regex to replace all newlines in the selected text:

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

This searches for any newline \n characters, captures any content on the line after it (.*), and then reinserts it with a bullet point - separating the newline and captured content. the g flag matches all cases.

See this fiddle for a working example.

Note that this solution should preserve most of the existing behaviour of your code. One eccentricity is that if the last character in your selection is a newline character, it will add a bullet point to the line below, which may not be desirable. To get rid of this you could modify the regex so that it ignores newline characters that border the end of the selected string (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  - ")

I'll leave it up to you to figure out how to get the exact behaviour you want. The above examples should help you to get started at least. In any case, I would highly suggest refactoring the replacement logic and unit testing it thoroughly to ensure consistent behaviour.

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

Replace text on every selected line in a textarea

javascript

regex

jquery

textarea