javascript - window.getSelection() 在诸如 之类的语义元素上

Question

假设我有这个 html

<strong><a href="url">Link</a></strong>

我想以编程方式将其替换为其他内容。我用鼠标选择它并调用

var sel = window.getSelection()

sel的内容然而是 text ，其parentNode为链接节点a (它的父节点是我正在寻找的 <strong> 元素)。

我可以获得语义元素，例如strong , b , em在选择中？

用例:我想在所见即所得编辑器 (html) 中选择一些文本并将其替换为链接。

Answer 1

您可以使用 jQuery 选择器功能在字符串中搜索特定标记:

$('#btn').on('click', function() {
  var sel = getSelectionHtml();
  alert(sel.toString())
  var anchor = $(sel).find('a');
  var id = anchor.attr('id');
  // here DOM manipulation starts
  $('#' + id).html('Click here');
});

function getSelectionHtml() {
  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;
    }
  }
  return html;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>This is sample text</span>
<br/>
<br/>
<strong><a href="url" id="myLink">Link</a></strong>
<span>This is another text</span>
<br/>
<br/>
<span>Select two above lines and click the button below</span>
<br/>
<br/>
<input type="button" id="btn" value="Click to see selected HTML" />

用于获取 HTML 选择的函数在此 page 中被重用