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

Question

<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>

我有两个 contenteditable div，这些 div 的内容完全相同。当我使用鼠标突出显示 leftdiv 中的部分内容(如“第二”文本中的“ond”)时，我希望同时突出显示 rightdiv 中完全相同的部分。最终 2 个单独的 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);
        });
 });

Answer 1

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

尝试在 leftdiv 中选择“ond”，正如您在描述中所建议的那样，并且“ond”在 rightdiv 中突出显示(选择完成后 - 它不会在您拖动鼠标更改选择时实时更新).

如果您在 leftdiv 中跨多个 div 选择内容，这将中断，如果您选择出现多次的文本，它将突出显示第一个匹配项，而不是完全匹配项。就像我说的，只是想为您提供一条进一步探索的潜在途径。

$('#leftdiv').on('mouseup', function() {
    $("*").removeClass("highlight");
    $('#rightdiv').html($('#leftdiv').html());
    var selection = window.getSelection()+"";   
    var matchStart = $('#rightdiv').html().indexOf(selection);
    var matchEnd = matchStart + selection.length - 1;
    var beforeMatch = $('#rightdiv').html().slice(0, matchStart);
    var matchText = $('#rightdiv').html().slice(matchStart, matchEnd + 1);
    var afterMatch = $('#rightdiv').html().slice(matchEnd + 1);
    $('#rightdiv').html(beforeMatch + "<font class='highlight'>" + matchText + "</font>" + afterMatch);
    
});

.highlight {background-color:#b4daf7;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>