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选择器功能在字符串中搜索特定标记：

＆＃13;

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

＆＃13;

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

＆＃13;

用于获取HTML选择的函数已从此page

重复使用

Answer 2

您确定页面上没有其他<strong>标签吗？这根本不是唯一的，因此您将面临选择/替换错误元素的风险。你可以做一些你找到第一个或最接近的东西，但这可能仍然有风险（甚至可以在你正在运行的基于文本的广告中抓住它）。

那就是说，如果你对这种方法感到满意，你可以尝试这样的事情：

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

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

window.getSelection（）在像<strong>这样的语义元素上

2 个答案: