Javascript：如何通过一个字符有条件地扩展选择答案

【问题标题】：Javascript: How to conditionally extend selection by one characterJavascript：如何通过一个字符有条件地扩展选择
【发布时间】：2014-06-06 17:33:58
【问题描述】：

我是一名客观的 C 程序员，在过去两周内我需要快速了解 Javascript 以开发我正在制作的新应用程序。有几件事我还没有弄清楚，所以我决定在这里询问它们。

这一次，这是我的问题：

如果我选择的是单个单词，我如何检查单词之前的字符是否是双引号（引号），如果是，则扩展选择以包含它们？

其他相关点（由于程序的其余部分）：

仅当 focusNode 与 anchorNode 相同时才需要发生这种情况
可以向前或向后进行选择
除非有双引号，否则我不希望更改选择
实际上只需要在选择前检查双引号，但也许我可以扩展它，在选择后对双引号的行为也一样
不要忽略空格
javascript 不是 jquery

这是我尝试过的，这似乎是我应该做的事情，但由于我缺乏 Javascript 经验，它不起作用（我为愚蠢的错误和无知的错误用法道歉东西）：

    var selection       = window.getSelection();
    var focusNode       = selection.focusNode;
    var focusOffset     = selection.focusOffset;
    var anchorNode      = selection.anchorNode;
    var anchorOffset    = selection.anchorOffset;

    if (anchorNode === focusNode ) {
    var quoteRange = document.createRange();
    var quoteString = "";

    if ((focusOffset > anchorOffset) && anchorOffset > 0){ //selection is forwards
       quoteRange.setStart(anchorNode, anchorOffset);
        quoteRange.setEnd(anchorNode, anchorOffset - 1);
        quoteString = quoteRange.toString();
    } else if ((focusOffset < anchorOffset) && focusOffset > 0){ //selection is backwards
       quoteRange.setStart(focusNode, focusOffset);
        quoteRange.setEnd(focusNode, focusOffset - 1);
        quoteString = quoteRange.toString();
     }

    console.log(quoteString);

    if (quoteString ===  "\"") {
       selection.modify("extend", "backward", "character");
    }

}

我觉得有些事情比我更有经验的人应该很明显，我做错了。

在我的版本中，“quoteString” 在（据我所知）不应该是空的时候总是以空结束。

【问题讨论】：

我在这方面有一些经验，并使用了一个名为 rangy 的 javascript 库。也许它也可以帮助你。 github.com/timdown/rangy
是的，我看到 rangy 提到了很多。它的作者似乎在这里大力宣传它。不过，我希望在没有图书馆的情况下做到这一点，因为这似乎是一个简单的问题。基本上我需要得到的只是范围内的文本。（假设我得到正确的范围）。无论如何，谢谢。
在什么情况下不起作用？代码看起来很合理。此外，一般情况下，anchorNode 和 focusNode 不保证是文本节点，尽管您可能知道这一点并且不需要处理它们不是的情况。
关于 Rangy，如果没有它的简单解决方案，这些天我尽量不去推广它，但我承认我在早期可能确实有点过于热情地推广它。
谢谢蒂姆。我在用户长按我的 iOS 应用程序中的 UIWebView 后调用它。长按会自动（在大多数情况下）选择一个单词。所以在这种情况下它应该总是一个文本节点？（老实说，我不确定，因为我对 Javascript/html 知之甚少）。在不适用的情况下，我确实有另一个问题（非常短的节点，似乎也选择了标签），但我想我会单独讨论。 - 所以，你是说这应该有效？ console.log 始终为空/空白，但如果我检查 if (quoteString === "")，它的评估结果也为 false。我很困惑。

标签： javascript range selection

【解决方案1】：

哇哦！我让它工作。似乎问题在于我创建的范围是负面的。当我交换 setEnd 和 setStart 时，一切都按预期工作。 :)

if (anchorNode === focusNode ) {
    var quoteRange = document.createRange();
    var quoteString = "";
    if ((focusOffset > anchorOffset) && anchorOffset > 0){ //selection is forwards
       quoteRange.setEnd(anchorNode, anchorOffset);
        quoteRange.setStart(anchorNode, anchorOffset - 1);
        quoteString = quoteRange.toString();
            } else if ((focusOffset < anchorOffset) && focusOffset > 0){ //selection is backwards
       quoteRange.setEnd(focusNode, focusOffset);
        quoteRange.setStart(focusNode, focusOffset - 1);
        quoteString = quoteRange.toString();
                }
    console.log(quoteString);

   if (quoteString ===  "\"") {
       selection.modify("extend", "backward", "character");

【讨论】：