javascript - 如何获取光标存在于可内容编辑的 div 中的 div？

Question

我正在研究为 JavaScript 编写一个简单的代码编辑器。目前一个divwithcontenteditable似乎比一个文本区域更合适。但是在获取光标 div 方面仍然感觉非常初级。

<div contenteditable="true">
    <div><br></div>
    <div>123</div>
    <div><br></div>
    <div>abc</div>
</div>

这是div我有四行的地方，我将光标放在了第二行 ( <div>123</div>)。有没有办法有效地获取光标所在的 div？我目前的方法是

var xpath = "//div[text()='123']";
var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

我想div在获取后插入一个新的div，我这样做如下：

var d = document.createElement("div")
var b = document.createElement("br")
d.appendChild(b)
matchingElement.parentNode.insertBefore(d, matchingElement.nextSibling);

这里的问题是，如果 中的文本div很大，在对每个 dom 元素进行字符串比较时会不会导致性能问题？