所选文本的 HTML

IT技术 javascript
2021-01-22 20:35:52

是否有跨浏览器的方式来获取所选文本的 HTML?

1个回答

此功能将在所有主要浏览器中执行:

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


// bind events for selection

document.addEventListener('mouseup', function(){
  var selectedHTML = getSelectionHtml();
  if( selectedHTML )
    console.log( selectedHTML )
});

document.addEventListener('keyup', function(e){ 
  var selectedHTML, key = e.keyCode || e.which; 
  if( key == 16 ){ // if "shift" key was released
    selectedHTML = getSelectionHtml();
    if( selectedHTML )
      console.log( selectedHTML )
  }
});
<ul contenteditable>
  <li><p>Select <b>this</b> <em>text</em> right <i>here</i></p></li>
  <li>Or <b>this text</b></li>
</ul>

HTML 文档从根本上说是一棵节点树。一旦最初的 HTML 文本被解析,它基本上就消失了,你必须处理节点。可以(但相对复杂)将选择转换为您建议的字符串类型,但不能保证它会匹配原始 HTML 文本,这只是表示文档的许多同样有效的方式之一。
2021-03-16 20:35:52
此解决方案的问题在于,当您选择<p>第一段 TEXT TO</p><p>BE SELECTED 第二段</p> 的大写锁定部分时,您不会得到预期的“TEXT TO</p” ><p>BE SELECTED”但“<p>TEXT TO</p><p>BE SELECTED</p> - 出于某种原因,浏览器广告标签不在选择中,以便关闭选择中的标签。是有什么方法可以只获得选择中的真正内容?
2021-03-18 20:35:52