Bookmarklet捕获包括html标签的所选内容

问题描述

我正在构建一个JS书签，它允许我捕获用户在浏览器中选择的文本并将其发送到Web应用程序。我目前检查了几个教程，并有一个如下所示的脚本：

I'm building a JS bookmarklet which allows me to capture text that a user has selected in their browser and sends it off to a web app. I've currently checked out a couple of tutorials and have a script which looks like this:

javascript:var t;try {t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));}catch(e){t="";}alert(t);

为了使它更简单，这里的代码更具可读性：

To make it a bit easier, here's the code in a more readable fashion:

javascript:
      var t;
      try {
        t=((window.getSelection&&window.getSelection()) || (document.getSelection&&document.getSelection()) || (document.selection&&document.selection.createRange&&document.selection.createRange().text));
      }catch(e)
      {
        t="";
      }
      alert(t);

当前代码我已经抓取所选文本并发出警报，以便我可以看到已捕获的内容。但是，文本的格式对我来说很重要，所以我真正想做的就是在本文中抓取任何HTML。事实上，我认为最好还是找出用户在页面中选择的位置并从所选内容的开头和结尾查找，找到最近的HTML标签，然后抓住其中的内容。 （因为用户无法判断他们是否选择HTML或不容易）

The current code I have grabs the selected text and alerts out so I can see what's been captured. However, the formatting of the text is important to me so what I'd really like to do is grab any HTML in this text too. In fact, I think it might be better yet to work out where the user has selected in the page and look up from the start and back from the end of the selected content to find the nearest HTML tags and then grab what's within that. (as the user can't tell if they're selecting HTML or not easily)

我更习惯使用JQuery来进行DOM选择，所以这是此刻有点过头了。 （除非你可以使用带有书签的JQuery ......你可以吗？）

I'm much more used to working with JQuery to do DOM selections so this is a bit over my head at the moment. (Unless you can use JQuery with a bookmarklet... can you?)

任何人都可以帮我这个吗？ （即使只是指向正确的方向也很棒，我这样做是为了一个爱好学习项目，所以我很乐意自己解决一些问题。）

Can anyone help me with this? (Even just pointing me in the right direction would be great, I'm doing this as a hobby learning project so I'm happy to figure some stuff out myself.)

推荐答案

以下函数将返回一个包含用户选择的HTML的字符串：

The following function will return a string containing the HTML of the user's selection:

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

这是书签的缩减版本：

javascript:(function(){var h="",s,g,c,i;if(window.getSelection){s=window.getSelection();if(s.rangeCount){c=document.createElement("div");for(i=0;i<s.rangeCount;++i){c.appendChild(s.getRangeAt(i).cloneContents());}h=c.innerHTML}}else if((s=document.selection)&&s.type=="Text"){h=s.createRange().htmlText;}alert(h);})()

这篇关于Bookmarklet捕获包括html标签的所选内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！