Javascript 以编程方式选择另一个contenteditable div上的部分内容

这远不是一个完整的解决方案，它利用css来伪造第二个选择，但也许它会给你一个想法

按照描述中的建议，尝试在leftdiv中选择ond，选择完成后，ond将在rightdiv中高亮显示-拖动鼠标更改选择时，它不会实时更新

如果在leftdiv中选择多个div中的内容，这将中断，如果选择多次出现的文本，它将突出显示第一个匹配项，而不是确切的匹配项。就像我说的，我只是想给你一个潜在的途径去进一步探索

$'leftdiv'。在'mouseup'上，函数{ $*.removeClasshighlight； $'rightdiv'.html$'leftdiv'.html； var selection=window.getSelection+； var matchStart=$'rightdiv'.html.indexOfselection； var matchEnd=matchStart+selection.length-1； var beforeMatch=$'rightdiv'.html.slice0，matchStart； var matchText=$'rightdiv'.html.slicematchStart，matchEnd+1； var afterMatch=$'rightdiv'.html.slicematchEnd+1； $'rightdiv'.htmlbeforeMatch++matchText++afterMatch； }; .突出显示{背景色：b4daf7；} 第一个文本 第二文本 ... 其他文本 第一个文本 第二文本 ... 其他文本

---

不幸的是，在Web浏览器中不能有多个真正的选择。你能做的最好的事情就是通过创建元素来包装你想突出显示的内容来伪装它，但这是一个更难解决的问题。

<div  id="leftdiv"   style="float:left;display:inline-block;height:100px;font-family:Helvetica;font-size:14px;width:300px;border:1px solid red;" contenteditable>
    <div>
        first text
    </div>
    <div>
        second text
    </div>
    ...
    <div>
        other texts
    </div>
</div>
<div  id="rightdiv" style="margin-left:1em;display:inline-block;float:left;width:300px;height:100px;font-family:Helvetica;font-size:14px;border:1px solid red;" contenteditable>
    <div>
        first text
    </div>
    <div>
        second text
    </div>
    ...
    <div>
        other texts
    </div>
</div>

  $('#leftdiv').on('mousedown', function() {
        $('#leftdiv').on('selectstart', function() {
            document.getElementById('rightdiv').tabIndex = -1 ;
            document.getElementById('rightdiv').focus();
            var range  = document.createRange();
            range.selectNodeContents(this);
            var sel  = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        });
 });