javascript - 将光标(插入符号)置于 contenteditable 元素中的特定位置

Question

我正在制作一个网络应用程序来测试正则表达式。我有一个输入，可以在其中输入正则表达式，还有一个 contenteditable pre 元素，可以在其中输入找到并突出显示匹配项的文本。

示例:假设正则表达式为 ab，如果用户在 pre 元素中键入 abcab，则正则表达式和文本都会发送到我实现的返回的 api

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <span style='background-color: lightgreen'>ab</span>c<span style='background-color: lightgreen'>ab</span></code></pre>
</div>
</div>

并且该字符串被设置为 pre 元素的innerHTML

每次用户编辑 pre 元素的内容(确切地说是 keyup 事件)时都会执行此操作。我遇到的问题(我希望你能解决)是每次设置 innterHTML 时，插入符号都放在开头，我希望它放在用户输入的最后一个字符之后。关于如何知道插入符的放置位置以及如何将其放置在所需位置有什么建议吗？谢谢。

更新为了更好地理解......一个明确的案例:正则表达式是 ab，在 contenteditable 元素中我们有:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <span style='background-color: lightgreen'>ab</span>c<span style='background-color: lightgreen'>ab</span></code></pre>
</div>
</div>

然后我在第一个 a 和第一个 b 之间输入 c，所以现在我们有:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    acbc<span style='background-color: lightgreen'>ab</span></code></pre>
</div>
</div>

此时插入符号已返回到 contenteditable 元素的开头，它应该放在我键入的 c 之后。这就是我想要实现的目标，希望现在更清楚了。

更新2

function refreshInnerHtml() {
  document.getElementById('textInput').innerHTML = "<span style='background-color: lightgreen'>ab</span>c<span style='background-color: lightgreen'>ab</span>";
}

      <pre contenteditable onkeyup="refreshInnerHtml()" id="textInput" style="border: 1px solid black;" ></pre>

Answer 1

在这些函数的帮助下 ->

Add element before/after text selection

我创造了一些我认为你想要的东西。我基本上将一些临时标签放入当前光标所在的 html 中。然后，我渲染新的 HTML，然后将标签替换为带有 data-cpos 属性的 span。然后我使用它重新选择光标。

var insertHtmlBeforeSelection, insertHtmlAfterSelection;

(function() {
    function createInserter(isBefore) {
        return function(html) {
            var sel, range, node;
            if (window.getSelection) {
                // IE9 and non-IE
                sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {
                    range = window.getSelection().getRangeAt(0);
                    
                    range.collapse(isBefore);
        
                    // Range.createContextualFragment() would be useful here but is
                    // non-standard and not supported in all browsers (IE9, for one)
                    var el = document.createElement("div");
                    el.innerHTML = html;
                    var frag = document.createDocumentFragment(), node, lastNode;
                    while ( (node = el.firstChild) ) {
                        lastNode = frag.appendChild(node);
                    }
                    range.insertNode(frag);
                }
            } else if (document.selection && document.selection.createRange) {
                // IE < 9
                range = document.selection.createRange();
                range.collapse(isBefore);
                range.pasteHTML(html);
            }
        }
    }
    
    insertHtmlBeforeSelection = createInserter(true);
    insertHtmlAfterSelection = createInserter(false);
})();




function refreshInnerHtml() {
  var
    tag_start = '⇷',  //lets use some unicode chars unlikely to ever use..
    tag_end = '⇸',
    sel = document.getSelection(),
    input = document.getElementById('textInput');
   
  //remove old data-cpos
  [].forEach.call(
    input.querySelectorAll('[data-cpos]'),
    function(e) { e.remove() });
  
  //insert the tags at current cursor position
  insertHtmlBeforeSelection(tag_start);
  insertHtmlAfterSelection(tag_end);
  
  //now do our replace
  let html = input.innerText.replace(/(ab)/g, '<span style="background-color: lightgreen">$1</span>');
  input.innerHTML = html.replace(tag_start,'<span data-cpos>').replace(tag_end,'</span>');
  
  //now put cursor back 
  var e = input.querySelector('[data-cpos]');
  if (e) {
    var range = document.createRange();
    range.setStart(e, 0);
    range.setEnd(e, 0);
    sel.removeAllRanges();
    sel.addRange(range);  
  }
}

refreshInnerHtml();

Type some text below, with the letters 'ab' somewhere within it. <br>

<pre contenteditable onkeyup="refreshInnerHtml()" id="textInput" style="border: 1px solid black;" >It's about time.. above and beyond</pre>