如何在可满足内容的元素的文本中重复选择给定字符串

经过更多的时间研究，我偶然发现了Tim Down的Rangy JavaScript范围和选择库(https://github.com/timdown/rangy)。事实证明，这个库非常有用，它有助于在给定元素的所有子节点中查找字符串的下一次出现。

首先，我使用条件语句来处理在可满足元素中按F9键时选择/插入符号状态的下列可能性:

1. 搜索字符串的实例已经被选中
2. 已经选择了其他内容，但没有选择与搜索字符串不匹配
3. 未选择任何内容，但插入符号位于可内容元素
中的某个位置。
4. 插入符号不在contentitable元素中，但是contentitablediv有焦点(即用户选择了滚动条)

:

document.getElementById('main').onkeydown = function (e) {
    switch (e.keyCode) {
        case 120: {
            // F9 to select next fill_me
            var sel = window.getSelection();
            // this should refer to document.getElementById('main')
            var target = 'fill_me';
            if (sel.toString().search(target) > -1) {
                // target is already selected; go to end of selection
                findOne(target, this, sel.focusNode, sel.focusOffset);
            }
            else if (sel.toString().length > 0) {
                // something is already selected but it's not target
                // so go to start of selection
                findOne(target, this, sel.anchorNode, sel.anchorOffset);
            }
            else if (sel.rangeCount) {
                // nothing is selected, start search at cursor
                findOne(target, this, sel.anchorNode, sel.getRangeAt(0).endOffset);
            }
            else {
                // caret is not in the contenteditable element, but the contenteditable div has focus
                findOne(target, this, null, null);
            }
            break;
        }
    }
};

在上面的每个结果中，使用Rangy的findText函数调用findOne函数来查找搜索字符串的适当实例:

function findOne(target, within, startNode, startPos) {
    if (rangy.supported) {
        var range = rangy.createRange();
        var searchScopeRange = rangy.createRange();
        var caseSensitive = true;
        // assign the search scope range to the contents of
        // the element passed as a parameter, within
        searchScopeRange.selectNodeContents(within);
        if (startNode != null && startPos != null) {
            // set the start of the search scope range if
            // passed parameters are not null; otherwise
            // its start is the beginning of  the range
            searchScopeRange.setStart(startNode, startPos);
        }
        var options = {
            caseSensitive: true,
            wholeWordsOnly: true,
            withinRange: searchScopeRange
        };
        range.selectNodeContents(within);
        if (target !== "") {
            target = new RegExp(target, caseSensitive ? "g" : "gi");
            // Find first match
            range.findText(target, options)
            // translate Rangy nodes & offsets to use for selection
            selectRange(range.startContainer, range.endContainer,
                        range.startOffset, range.endOffset);
        }
    }
    function selectRange(startNode, endNode, startPos, endPos) {
        // this function takes parameters and selects an appropriate
        // within the DOM
        var range = document.createRange()
        range.setStart(startNode, startPos);
        range.setEnd(endNode, endPos);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
}

整个工作项目包含在下面的代码片段中。感谢Tim Down出色的工作!

rangy.init();
document.getElementById('main').focus();
document.getElementById('main').onkeydown = function(e) {
  switch (e.keyCode) {
    case 120:
      {
        // F9 to select next %fill%
        //$('#main').selecttarget('%fill%');var node;
        var sel = window.getSelection();
        var target = 'fill_me';
        
        // this should refer to document.getElementById('main')
        if (sel.toString().search(target) > -1) {
          // target is already selected; go to end of selection
          findOne(target, this, sel.focusNode, sel.focusOffset);
        } else if (sel.toString().length > 0) {
          // something is already selected but it's not target
          // so go to start of selection
          findOne(target, this, sel.anchorNode, sel.anchorOffset);
        } else if (sel.rangeCount) {
          // nothing is selected, start search at cursor
          findOne(target, this, sel.anchorNode, sel.getRangeAt(0).endOffset);
        } else {
          // this should never really happen, but it's a catch-all
          findOne(target, this, null, null);
        }
        break;
      }
  }
};
function findOne(target, within, startNode, startPos) {
  if (rangy.supported) {
    var range = rangy.createRange();
    var caseSensitive = true;
    var searchScopeRange = rangy.createRange();
    // assign the search scope range to the contents of
    // the element passed as a parameter, within
    searchScopeRange.selectNodeContents(within);
    if (startNode != null && startPos != null) {
      // set the start of the search scope range if
      // passed parameters are not null; otherwise
      // its start is the beginning of  the range
      searchScopeRange.setStart(startNode, startPos);
    }
    var options = {
      caseSensitive: true,
      wholeWordsOnly: true,
      withinRange: searchScopeRange
    };
    if (target !== "") {
      target = new RegExp(target, caseSensitive ? "g" : "gi");
      // Find first match
      range.findText(target, options)
      // translate Rangy nodes & offsets to use for selection
      selectRange(range.startContainer, range.endContainer,
        range.startOffset, range.endOffset);
    }
  }
  function selectRange(startNode, endNode, startPos, endPos) {
    // this function takes parameters and selects an appropriate
    // within the DOM
    var range = document.createRange()
    range.setStart(startNode, startPos);
    range.setEnd(endNode, endPos);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  }
}

div.main {
  text-align: left;
  width: 90%;
  height: 500px;
  padding: 5px;
  overflow: scroll;
  border: solid thin cornflowerblue;
}
span.lineheader {
  font-weight: bold;
}

<script type="text/javascript" src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-core.js"></script>
<script type="text/javascript" src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-textrange.js"></script>
<p><span class='lineheader'>Instructions:</span>&nbsp;Press F9 to skip between instances of <i>'fill_me'</i> in the contenteditable div below</p>
<div id='main' tabindex='0' class='main' contenteditable>
  <p><span class='lineheader'>Date:</span>&nbsp;fill_me.</p>
  <p><span class='lineheader'>Item 1:</span>&nbsp;fill_me</p>
  <p><span class='lineheader'>Item 2:</span>&nbsp;fill_me</p>
  <p><span class='lineheader'>List 1:</span>
    <ul>
      <li>fill_me</li>
      <li>fill_me</li>
      <li>fill_me</li>
    </ul>
  </p>
  <p><span class='lineheader'>Paragraph 1:</span>&nbsp;Sed convallis massa augue. Vivamus a enim vitae eros mattis dignissim ac non velit. Donec porta fill_me tellus in justo viverra rhoncus. Nullam et sapien dapibus, eleifend elit ac, commodo est. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sagittis quis massa vitae bibendum. Maecenas placerat mi eget arcu aliquam, id fill_me accumsan nisi dictum. Vestibulum consequat porttitor nisl eu ultrices. Donec
    non blandit tortor fill_me. Aliquam erat volutpat. fill_me id ante et felis porttitor convallis. Sed.</p>
</div>