Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/73.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 选择文字边界,但不包括标点符号_Javascript_Html_Dom_Selection - Fatal编程技术网

Javascript 选择文字边界,但不包括标点符号

Javascript 选择文字边界,但不包括标点符号,javascript,html,dom,selection,Javascript,Html,Dom,Selection,我试图修改用户所做的选择,使其始终是完整的单词。例如,鉴于文本“报告:奥巴马总统寻求在阿富汗保留9800名美军……今年之后,消息来源说”,如果用户选择“fghanist”,我希望选择修改为“阿富汗”。经过一番搜索,我在Stackoverflow上偶然发现了以下解决方案: snapSelectionToWord : function() { var sel; if (window.getSelection && (sel = window.getSelection()).m

我试图修改用户所做的选择,使其始终是完整的单词。例如,鉴于文本“报告:奥巴马总统寻求在阿富汗保留9800名美军……今年之后,消息来源说”,如果用户选择“fghanist”,我希望选择修改为“阿富汗”。经过一番搜索,我在Stackoverflow上偶然发现了以下解决方案:

snapSelectionToWord : function() {
  var sel;
  if (window.getSelection && (sel = window.getSelection()).modify) {
    sel = window.getSelection();
    if (!sel.isCollapsed) {
        // Detect if selection is backwards
        var range = document.createRange();
        range.setStart(sel.anchorNode, sel.anchorOffset);
        range.setEnd(sel.focusNode, sel.focusOffset);

        var backwards = range.collapsed;
        range.detach();

        // modify() works on the focus of the selection
        var endNode = sel.focusNode, endOffset = sel.focusOffset;
        sel.collapse(sel.anchorNode, sel.anchorOffset);

        var direction = [];
        if (backwards) {
            direction = ['backward', 'forward'];
        } else {
            direction = ['forward', 'backward'];
        }

        sel.modify("move", direction[0], "character");
        sel.modify("move", direction[1], "word");
        sel.extend(endNode, endOffset);
        sel.modify("extend", direction[1], "character");
        sel.modify("extend", direction[0], "word");
    }
  } else if ( (sel = document.selection) && sel.type != "Control") {
      var textRange = sel.createRange();
      if (textRange.text) {
        textRange.expand("word");
        // Move the end back to not include the word's trailing space(s), if necessary
        while (/\s$/.test(textRange.text)) {
            textRange.moveEnd("character", -1);
        }
        textRange.select();
    }
  }
},
原则上,它工作得相当好。然而,也有一些悲惨的案例。例如,选择“fghanistan..”后会出现“Afghanistan…after”(我想要“Afghanistan”)。对于selection“.afte”(此处的期望结果:“after”)我得到了相同的结果。主要问题似乎是粒度
word
只考虑空格,而不考虑其他标点符号

我现在的想法是将粒度从
word
更改为
character
,并将其放入循环中,直到达到标点符号为止。这对于
sel.modify(“extend”,…)非常有效行,但不适用于
sel.modify(“移动”,…)行。在
折叠
和第一次
移动
修改之后,
sel.toString()
为空。因此,我无法循环第一个/最后一个字符以逐字符移动。
sel.extend后(endNode,endOffset)
sel.toString()
再次设置,并且使用循环的方法有效

我就是想不起这个问题。

我偶然发现了它,它很好地解决了我的问题。使用此库可将我的功能简化为:

snapSelectionToWord : function() {
  rangy.getSelection().expand("word");
},

感谢开发者让我的生活变得如此轻松

自动选择整个单词的应用程序让我发疯。请注意,有些用户会非常讨厌此功能。:-)罗布,同意!我也不喜欢被人光顾:)。然而,我的目标是开发一个用户注释文本片段的系统。也就是说,他们首先选择一个代码段,然后可以对其进行注释。我认为在这种情况下,抓住单词边界是合理的。