Question

我有一个包含HTML的textarea和一个呈现此HTML的div。
我想做的就是每当我在start或end中选择文本时，在innerHTML中获得选择位置（textarea和div）。 textarea 。

当我在textarea中选择文本时，我已经设法获得了职位（因为对于input或div都有很简单的方法可以做到），但是我在string.indexOf部分。

This answer帮助我获取了选定的HTML，但这有两个问题：

如果同一段HTML出现两次，使用<li>获取位置将始终使我获得第一次出现的位置
无论何时选择元素的一部分（可能是，，，innerHTML等），该函数都会添加相应的标记，因此所选的HTML与tu</li><li>Pi不匹配。
- 如果在下面的示例中选择<li>，我会得到 tu</li><li>Pi </li> updateDiv(); function updateDiv() { $("#myDiv").html($("#myArea").val()); } function myTest() { var html = ""; if (typeof window.getSelection != "undefined") { var sel = window.getSelection(); if (sel.rangeCount) { var container = document.createElement("div"); for (var i = 0, len = sel.rangeCount; i < len; ++i) { container.appendChild(sel.getRangeAt(i).cloneContents()); } html = container.innerHTML; } } else if (typeof document.selection != "undefined") { if (document.selection.type == "Text") { html = document.selection.createRange().htmlText; } } if(html.length > 0) alert(html); } 。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<textarea id='myArea' onchange='updateDiv();' rows='12', cols='40'>
  <ol>
    <li>Patata</li>
    <li>
      Petete
      <ul>
        <li><b>Pututu</b></li>
        <li><i>Pititi</i></li>
        <li>Pututu</li>
      </ul>
    </li>
  </ol>
</textarea>

<div id='myDiv' onclick='myTest()'>
</div>

textarea

我希望能够基于所选HTML对div的内容执行操作（因此，为什么我需要获得相对于innerHTML {{1} }。

如何获得相对于innerHTML的选择位置

0 个答案: