Question

我在带有按钮的textarea中有一个非常大的文本，我想要做的就是：

1 - 单击此按钮后，自动获取用户使用鼠标选择的文本的jquery部分，并在此textarea中的文本周围创建2个标签

示例：

文字区域中的现有文字：

Lorem Ipsum只是打印和排版的虚拟文本行业。 Lorem Ipsum一直是业界标准的虚拟文本自从16世纪以来，当一个未知的打印机采取类型的厨房然后把它拼凑成一本样本书。它没有幸存下来只有五个世纪，但也是电子排版的飞跃，保持基本不变。它在20世纪60年代随着推广而普及释放包含Lorem Ipsum段落的Letraset表格，以及最近使用像Aldus PageMaker这样的桌面出版软件包括Lorem Ipsum的版本。

鼠标选择的文字：

1500s，当一个未知的打印机拿了一个类型的厨房并乱扰它制作一本样本书。它不仅存活了五个世纪，也是电子排版的飞跃，

点击按钮后会发生什么：

Lorem Ipsum只是打印和排版的虚拟文本行业。 Lorem Ipsum一直是业界标准的虚拟文本自 [INFO] 1500s以来，当一台未知的打印机采用了类型的厨房时然后把它拼凑成一本样本书。它没有幸存下来只有五个世纪，也是电子化的飞跃排版，[/ INFO] 基本保持不变。它是随着Letraset床单的发布，在20世纪60年代普及包含Lorem Ipsum段落，最近还有桌面版像Aldus PageMaker这样的出版软件，包括Lorem的版本存有。

我没有尝试任何东西，但我不知道是谁选择了所选文本，并将他更新到textarea。

Answer 1

虽然您可以使用类似jQuery的replace()函数，但这只会替换您突出显示的内容的第一个实例，而不是实际突出显示的内容。您可以通过获取选择的边界来解决此问题，然后相应地拆分字符串：

$("button").click(function () {
    var selection = window.getSelection(),
        text = "[INFO]" + selection + "[/INFO]",
        content = $("div").text(),
        range = selection.getRangeAt(0),
        startText = content.substring(0, range.startOffset), // cut from 0 to beginning of highlight
        endText = content.substring(range.endOffset, content.length); // cut from end of highlight to end of text
    $("div").html(startText + text + endText);
});

但有时会变得更复杂，as I've previously discussed at length。

Example

选择文本并更新他

1 个答案: