Question

我正在尝试使用javascript使用<div>和Range.setStart修改用户在不可编辑的 Range.setEnd元素中的文本选择。具体来说，我希望用户能够单击一个句子并让我的代码将选择范围扩展到包含单击的句子，然后突出显示（并处理）它。

在Chrome，Firefox和Edge下，当我使用这些功能更改选择时，新选项会在用户的浏览器窗口中突出显示。在Mac High Sierra下的Safari 11下，Range.*功能正确地改变了选择范围，但 用户的浏览器窗口不会改变以反映此 。如果用户只是点击，或者如果用户点击并拖动初始突出显示保持不变，则不会突出显示。

到目前为止，我已经在Mobile Safari上找到了<input>字段的SO答案，例如 Programmatically selecting text in an input field on iOS devices (mobile Safari) 但不适用于桌面Safari上的不可编辑字段。

感谢任何提示，变通方法，错误报告或其他解决方案，谢谢。

Here is a JSBin demonstrating the problem.

这是源代码。请注意，Safari确实正确设置了范围，但无法突出显示该范围，而Chrome，Firefox和Edge突出显示新范围：

function expandHL (){
   let textSel = window.getSelection();
   let newRange = textSel.getRangeAt(0);
   let node = textSel.anchorNode;

   console.log("Initial selection: " + newRange.toString().trim());
  
   // Find and include start of sentence containing clicked region:
    while (newRange.startOffset !== 0) {                         // start of node
        newRange.setStart(node, newRange.startOffset - 1);     // back up 1 char
        if (newRange.toString().search(/^[.!?:\n]\s*/) === 0) { // start of sentence
            newRange.setStart(node, newRange.startOffset + 1); // move forward char
            break;
        }
    }
  console.log("Final selection: " + newRange.toString().trim());
}

   <h3>Demo of Safari highlighting problem.</h3>
      <h4>
        1. Click in the text below: the range is detected 
        and expanded (see console output).  But it is 
        not highlighted as with Chrome or Firefox.<br><br>
        2. Click and drag on the text below: your initial range 
        is highlighted, then expanded but highlighting does not expand 
        with range as with Chrome or Firefox.  WHY?</h4>
      <hr>
    <div onclick="expandHL()">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
      accusantium doloremque laudantium, totam rem aperiam, eaque 
      ipsa quae ab illo inventore veritatis et quasi architecto beatae
      vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit 
      aspernatur aut odit aut fugit, sed quia consequuntur magni
      </div>

Answer 1

当几周没有人回答这个问题时，我终于通过反复试验找到了答案。因此，我answering my own question。

以this SO answer为出发点，我能够进行逆向工程并解决问题。显然，Safari和其他浏览器（如Edge）需要额外的代码来更新范围突出显示（有关详细信息，请参阅我的问题）。将以下两行添加到上面的代码会导致这些浏览器这样做：

textSel.removeAllRanges();
textSel.addRange(newRange);

我不确定这是否已被记录;如果它有，我肯定无法找到它。

为清楚起见，以下是适用于Chrome，Firefox，Safari和Edge的最终解决方案：

＆＃13;

    function expandHL (){
       let textSel = window.getSelection();
       let newRange = textSel.getRangeAt(0);
       let node = textSel.anchorNode;
    
       console.log("Initial selection: " + newRange.toString().trim());
      
       // Find and include start of sentence containing clicked region:
        while (newRange.startOffset !== 0) {                        // start of node
            newRange.setStart(node, newRange.startOffset - 1);      // back up 1 char
            if (newRange.toString().search(/^[.!?:\n]\s*/) === 0) { // start of sentence
                newRange.setStart(node, newRange.startOffset + 1);  // move forward char
                break;
            }
        }
        console.log("Final selection: " + newRange.toString().trim());
        textSel.removeAllRanges();
        textSel.addRange(newRange);
    }

＆＃13;

<h3>Demo of Safari highlighting problem (solved).</h3>
      <h4>
        1. Click in the text below: the range is detected 
        and expanded (see console output).  <del>But it is 
        not highlighted as with Chrome or Firefox.</del><br><br>
        2. Click and drag on the text below: your initial range 
        is highlighted, then expanded but highlighting does <del>not</del> expand 
        with range as with Chrome or Firefox.  <del>WHY?</del></h4>
      <hr>
    <div onclick="expandHL()">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
      accusantium doloremque laudantium, totam rem aperiam, eaque 
      ipsa quae ab illo inventore veritatis et quasi architecto beatae
      vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit 
      aspernatur aut odit aut fugit, sed quia consequuntur magni
      </div>

＆＃13;

如何在Range.setStart / Range.setEnd之后突出显示<div>中的桌面Safari文本选择？

1 个答案: