Question

body {
  margin: 0;
}

div {
  height: 60vh;
  width: 100vw;
  background: red;
}

我有两个满足的div，这些div具有完全相同的内容。当我使用鼠标突出显示leftdiv中的部分内容，如“第二”文本中的“ond”时，我想要同时突出显示在rightdiv中完全相同的部分。最终在单独的div中突出显示2将同时发生。

我试过这个但没有任何反应。

<div></div>

Answer 1

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

尝试选择＆＃34; ond＆＃34;在左侧，正如您在描述中所建议的那样，＆＃34; ond＆＃34;在rightdiv中突出显示（选择完成后 - 当您拖动鼠标以更改选择时，它不会实时更新）。

如果您在leftdiv中的多个div中选择内容，则会中断，如果您选择多次出现的文字，则会突出显示第一个匹配项，而不是完全匹配项。就像我说的那样，只是试图给你一条潜在的探索之路。

＆＃13;

InvalidCastException

＆＃13;

$('#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);
    
});

＆＃13;

.highlight {background-color:#b4daf7;}

＆＃13;

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

1 个答案: