用Javascript将插入符号移动到contenteditable中的搜索字符串

问题描述

我有一个内容可编辑的div，我需要将插入符号移动到字符串的位置，但是我看不到如何执行此操作。有人有建议吗？

<div id='mydiv' contenteditable='true'>Lorem ipsum dolor sit amet,consectetur adipiscing elit.
    Sed eget libero sit <mark>amet</mark> and **peekabo** magna sagittis sagittis quis nec risus.
    Pellentesque feugiat pharetra purus id pharetra.
</div>

<script>
doFindStringAndMoveCaret('mydiv','peekabo');


function doFindStringAndMoveCaret(elem,searchFor) { 
    // Find searchFor string in the elem.innerHTML,and then move the 
    // cursor to the beginning of that text

    ??
}

理想的普通旧javascript（不是jQuery）

谢谢 安倍

解决方法

function doFindStringAndMoveCaret(elem,text) {
  function setCurrentCursorPosition(element,chars) {
    element.focus()
    if (chars >= 0) {
      var selection = window.getSelection();

      range = createRange(element.parentNode,{
        count: chars
      });

      if (range) {
        range.collapse(false);
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }

    function createRange(node,chars,range) {
      if (!range) {
        range = document.createRange()
        range.selectNode(node);
        range.setStart(node,0);
      }

      if (chars.count === 0) {
        range.setEnd(node,chars.count);
      } else if (node && chars.count > 0) {
        if (node.nodeType === Node.TEXT_NODE) {
          if (node.textContent.length < chars.count) {
            chars.count -= node.textContent.length;
          } else {
            range.setEnd(node,chars.count);
            chars.count = 0;
          }
        } else {
          for (var lp = 0; lp < node.childNodes.length; lp++) {
            range = createRange(node.childNodes[lp],range);

            if (chars.count === 0) {
              break;
            }
          }
        }
      }

      return range;
    }
  }

  setCurrentCursorPosition(elem,new RegExp(text).exec(elem.innerHTML).index - 1)
}

doFindStringAndMoveCaret(document.getElementById('mydiv'),'peekabo')

<div id='mydiv' contenteditable='true'>Lorem ipsum dolor sit amet,consectetur adipiscing elit.
  Sed eget libero sit <mark>amet</mark> and **peekabo** magna sagittis sagittis quis nec risus.
  Pellentesque feugiat pharetra purus id pharetra.
</div>

这只是找到字符串在innerHTML的{​​{1}}中的位置，从中减去div，然后使用1聚焦setCurrentCursorPosition并将光标移到那里：

div

该函数中的其余代码已修改，并取自https://stackoverflow.com/a/41034697/。

如果要将光标移动到文本的开始，请使用

setCurrentCursorPosition(elem,new RegExp(text).exec(elem.innerHTML).index - 1)

相反。

setCurrentCursorPosition(elem,new RegExp(text).exec(elem.innerHTML).index - text.length - 1)

function doFindStringAndMoveCaret(elem,new RegExp(text).exec(elem.innerHTML).index - text.length - 1)
}

doFindStringAndMoveCaret(document.getElementById('mydiv'),'peekabo')

,

好吧，我想我终于完成了。

function doFindStringAndMoveCaret(editor,findTx) {
        treeObject = {}
        var element = editor;
        editor.focus();

        function doTreeWalk(element,object) {
            var nodeList = element.childNodes;
            if (nodeList != null) {
                if (nodeList.length) {
                    object[element.nodeName] = []; 

                    for (var i = 0; i < nodeList.length; i++) {

                        if (nodeList[i].nodeType == 3) {
                            var p=nodeList[i].nodeValue.indexOf(findTx);
                            if ( p!=-1 ) {
                                var sel=window.getSelection();
                                var range=sel.getRangeAt(0);
                                range.setStart(nodeList[i],p);
                                range.setEnd(nodeList[i],p+findTx.length);
                                return;
                            }
                        }
                        else {
                            object[element.nodeName].push({});
                            doTreeWalk(nodeList[i],object[element.nodeName][object[element.nodeName].length - 1]);
                        }
                    }
                }
            }
        }

        doTreeWalk(element,treeObject);
        return;
    }
    doFindStringAndMoveCaret(document.getElementById('mydiv'),'peekabo');

可以在https://jsfiddle.net/Abeeee/krLeop49/6/

上找到一个工作示例

仍然感谢

问候 安倍（Abe）

,

document.getElementById(elem).focus

尝试一下 或者这个

textSelect(document.getElementById(elem),1);