我可以使用以下代码来获取选定的文本:
text=window.getSelection(); /// for Firefox
text=document.selection.createRange().text; /// for IE
但是如何获得选定的 Html,其中包括 text 和 html 标签?
我可以使用以下代码来获取选定的文本:
text=window.getSelection(); /// for Firefox
text=document.selection.createRange().text; /// for IE
但是如何获得选定的 Html,其中包括 text 和 html 标签?
这是一个函数,可以让您获得与所有主要浏览器中的当前选择相对应的 HTML。它还处理选择范围内的多个范围(目前仅在 Firefox 中实现):
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;
}
alert(getSelectionHtml());
在 IE <= 10 浏览器中,它是:
document.selection.createRange().htmlText
正如@DarrenMB 指出的,IE11 不再支持这一点。请参阅此答案以供参考。
在非 IE 浏览器中,我只是尝试玩这个……这似乎有效,将节点分成两半并创建额外的跨度会产生副作用,但这是一个起点:
var range = window.getSelection().getRangeAt(0),
content = range.extractContents(),
span = document.createElement('SPAN');
span.appendChild(content);
var htmlContent = span.innerHTML;
range.insertNode(span);
alert(htmlContent);
不幸的是,我似乎无法将节点放回原样(例如,因为您可以从跨度中提取一半的文本)。
这是我想出的。使用 IE、Chrome、Firefox、Safari、Opera 进行测试。不返回空字符串。
function getSelected() {
var text = "";
if (window.getSelection
&& window.getSelection().toString()
&& $(window.getSelection()).attr('type') != "Caret") {
text = window.getSelection();
return text;
}
else if (document.getSelection
&& document.getSelection().toString()
&& $(document.getSelection()).attr('type') != "Caret") {
text = document.getSelection();
return text;
}
else {
var selection = document.selection && document.selection.createRange();
if (!(typeof selection === "undefined")
&& selection.text
&& selection.text.toString()) {
text = selection.text;
return text;
}
}
return false;
}
@zyklus:
我修改了你的函数来工作(我使用的是 jQuery,但这些部分可以很容易地用 Javascript 重写):
function getSelectionHtml() {
var htmlContent = ''
// IE
if ($.browser.msie) {
htmlContent = document.selection.createRange().htmlText;
} else {
var range = window.getSelection().getRangeAt(0);
var content = range.cloneContents();
$('body').append('<span id="selection_html_placeholder"></span>');
var placeholder = document.getElementById('selection_html_placeholder');
placeholder.appendChild(content);
htmlContent = placeholder.innerHTML;
$('#selection_html_placeholder').remove();
}
return htmlContent;
}
我发现高亮插件是最好的匹配,它非常轻巧,你可以突出显示部分内容:
$('li').highlight('bla');