获取HTML选择

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; 
}

我使用的是上面提供的代码：How to get selected html text with javascript?。获取HTML选择

但是，实际的html和函数返回的html存在如此不一致的地方。例如，假设下面的HTML：

<div> 
<p><b>The quick brown fox jumps over the lazy <a href="www.google.com">dog</a></b></p> 
<img src="http://www.fakingnews.firstpost.com/wp-content/uploads/2015/12/kim-jaya.jpg" alt="Smiley face" height="42" width="42"> 
<hr> 
<p>The quick brown fox jumps over the lazy <a href="http://www.google.com">dog</a></p> 
<li> 
    <ul>1</ul> 
    <ul>2</ul> 
    <ul>3</ul> 
    <ul>4</ul> 
    <ul>5</ul> 
</li> 
</div> 
<br /> 
<input id="showSelected" type="button" value="showSelected" />

如果我选择

x jumps over the lazy <a href="http://www.google.com">dog</a></p> 
<li> 
    <ul>1</ul> 
    <ul>2</ul> 
    <ul>3</ul>

函数实际上返回

<div><p>x jumps over the lazy <a href="http://www.google.com">dog</a></p> 
<li> 
    <ul>1</ul> 
    <ul>2</ul> 
    <ul>3</ul> 
    <ul>4</ul> 
    <ul>5</ul> 
</li> 
</div>

我注意到，在前面的额外的标记出现当我也选择一个列表，但我确定还有其他不一致的情况。有什么我可以做得到一个确切的HTML副本？

来源

2017-02-12 db2791

由于您选择的不是有效的HTML，例如缺少开启和关闭标签，因此您问题中列出的代码不会按预期工作，在您的情况下，您需要使用文本选择功能，类似的东西：https://stackoverflow.com/a/169873/200713

3210

来源

2017-02-12 21:03:10

获取HTML选择

回答

相关问题