将光标设置在可满足div的子字符串末尾

Question

用户在此处输入一些字符串，并且包含Mahi的字符串作为子字符串。我试图在单击按钮时将光标放在Mahi的末尾吗？

.html

<div id="demo" contenteditable="true"></div>

<button id="btn" onclick="focusAtMen()"></button>

js

// lets suppose user input is "Hi.......Mahi, .....?";
// here dots may be any characters

focusAtMen(){
var editor = document.getElementById("demo");
// set focus on `contentEditable div` and `place cursor at the end` of `Mahi` , thats a user Input.

}

Answer 1

您可以使用Range.setStart和Selection来获取光标插入符号的位置。 setStart函数将一个节点和一个偏移量作为该节点内的开始位置。

下面的代码处理文本中出现Mari时的情况。它也处理字符串中不包含Mari的情况，在这种情况下，它将插入号放置在文本的最后一个字符处。

function focusAtMen() {
  var textToFind = 'Mahi';
  var editor = document.getElementById("demo");

  var range = document.createRange();
  var sel = window.getSelection();
  
  // get the index of the start of 'Mahi'
  var indexOfMahi = editor.innerText.lastIndexOf(textToFind);
  
  if (indexOfMahi > -1) {
      // if text contains Mari
      range.setStart(editor.childNodes[0], indexOfMahi + textToFind.length);
  } else if (editor.innerText.length > 0) {     
     // if text does not contain Mari set cursor to the end of the string 
     range.setStart(editor.childNodes[0], editor.innerText.length);
  } else {
     // there is no text
     range.setStart(editor, 0);
  }
  
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
}

<div id="demo" contenteditable="true">some text Mahi and another Mahi included</div>
<button id="btn" onclick="focusAtMen()">Click</button>

请注意，上面的代码区分大小写，如果您需要将此代码用于mari和Mari，则需要对其进行相应的修改。