jquery 范围/选择获取HTML

7kqas0il 于 11个月前发布在 jQuery

关注(0)|答案(3)|浏览(113)

我有这个小提琴：http://jsfiddle.net/Uddaa/
目前它所做的是，当你点击文本时，它会发出一个警告，其中包含到该点为止的文本。我可以做些什么来让html达到该点，而不仅仅是文本？

JavaScript：

$(".content").on("click", function () {
    getBefore();
});

function getBefore() {
    var sel = document.getSelection();
    var off = sel.anchorOffset;
    var ran = sel.getRangeAt(0);
    ran.setStart($(".content").get(0), 0);
    alert(ran.toString());
}

字符串

HTML：

<div class="content">
    <p><b>Click</b> anywhere <u>within <em>the</em> text</u> to to see the code up to that point.</p>
</div>

型

jquery

来源：https://stackoverflow.com/questions/19861085/range-selection-get-html

3条答案

按热度按时间

bwleehnv1#

ran.cloneContents().childNodes[1].innerHTML提供完整的html。
参见jsfiddle或代码片段。

document.querySelector(".content").addEventListener("click", getHtmlBeforeThis);

function getHtmlBeforeThis(evt) {
  const origin = evt.target.closest(".content");
  if (origin) {
    const selection = document.getSelection();
    const offset = selection.anchorOffset;
    const range = selection.getRangeAt(0);
    range.setStart(origin, 0);
    const upToClickedHtml = range.cloneContents().childNodes[1].innerHTML;
    range.setEnd(origin, 0);
    console.clear();
    console.log(upToClickedHtml);
  }
}

个字符

赞(0）回复(0）举报 11个月前

xwmevbvl2#

您可以使用Rangy库来执行此操作：

rangy.getSelection().toHtml()

字符串
Example fiddle的

赞(0）回复(0）举报 11个月前

uqxowvwt3#

function getSelectedHtml() {
    const selectionDiv = document.createElement("div");
    selectionDiv.appendChild(window.getSelection().getRangeAt(0).cloneContents());
    return selectionDiv.innerHTML;
}

字符串

赞(0）回复(0）举报 11个月前

我来回答

jquery 范围/选择获取HTML

3条答案

相关问题

热门标签

最新问答