语义元素(如window.getSelection)上的window.getSelection()

Question

假设我有这个html

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

我想用其他的程序来代替它。我用鼠标选择这个，然后调用

var sel = window.getSelection()

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

我能在选择中得到诸如strong、b、em这样的语义元素吗？

用例:我希望在wysiwyg编辑器(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中重用。

Answer 2

您确定页面上不会有其他<strong>标记吗？这根本不是唯一的，因此您可能会选择/替换错误的元素。你可以在你找到第一个或最接近的地方做一些事情，但这仍然是有风险的(甚至可以在你正在运行的基于文本的广告中获取这个信息)。

尽管如此，如果您对这种方法感到满意，您可以尝试这样的方法：

document.getElementsByTagName("strong")[0].innerHTML = "<a href='url'>Some words</a>";

这将获取页面上的第一个<strong>标记，并为您注入链接。