window.getSelection()与HTML标签的偏移量
window.getSelection() offset with HTML tags?
如果我有以下HTML:
<div class="content">
Vivamus <span>luctus</span> urna sed urna ultricies ac tempor dui sagittis.
</div>
我在mouseup
上运行一个事件,查看所选文本的范围:
$(".content").on("mouseup", function () {
var start = window.getSelection().baseOffset;
var end = window.getSelection().focusOffset;
if (start < end) {
var start = window.getSelection().baseOffset;
var end = window.getSelection().focusOffset;
} else {
var start = window.getSelection().focusOffset;
var end = window.getSelection().baseOffset;
}
console.log(window.getSelection());
console.log(start + ", " + end);
});
我从内容中选择单词Vivamus
,它将记录1, 8
,因为这是选择的范围。
如果,但是,我选择单词urna
,它将记录15, 20
,但不会考虑HTML的<span>
元素。
无论如何focusOffset
和baseOffset
也计算HTML标签,而不仅仅是文本?
更新
实例:http://jsfiddle.net/FLwxj/61/
使用clearSelection()
函数和替换方法,我能够获得所需的结果。
var txt = $('#Text').html();
$('#Text').html(
txt.replace(/<'/span>(?:'s)*<span class="highlight">/g, '')
);
clearSelection();
来源:
-
clearSelection()
: https://stackoverflow.com/a/6562764/1085891 - 替代方法:https://stackoverflow.com/a/7168142/1085891
下面你会发现一些有效的解决方法。我将它们按代码效率排序。
工作方案
https://stackoverflow.com/a/8697302/1085891(实例)
window.highlight = function() { var selection = window.getSelection().getRangeAt(0); var selectedText = selection.extractContents(); var span = document.createElement("span"); span.style.backgroundColor = "yellow"; span.appendChild(selectedText); span.onclick = function (ev) { this.parentNode.insertBefore( document.createTextNode(this.innerHTML), this ); this.parentNode.removeChild(this); } selection.insertNode(span); }
https://stackoverflow.com/a/1623974/1085891(实例)
$(".content").on("mouseup", function () { makeEditableAndHighlight('yellow'); }); function makeEditableAndHighlight(colour) { sel = window.getSelection(); if (sel.rangeCount && sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on"; if (range) { sel.removeAllRanges(); sel.addRange(range); } // Use HiliteColor since some browsers apply BackColor to the whole block if (!document.execCommand("HiliteColor", false, colour)) { document.execCommand("BackColor", false, colour); } document.designMode = "off"; } function highlight(colour) { var range, sel; if (window.getSelection) { // IE9 and non-IE try { if (!document.execCommand("BackColor", false, colour)) { makeEditableAndHighlight(colour); } } catch (ex) { makeEditableAndHighlight(colour) } } else if (document.selection && document.selection.createRange) { // IE <= 8 case range = document.selection.createRange(); range.execCommand("BackColor", false, colour); } }
https://stackoverflow.com/a/12823606/1085891(实例)
其他有用的解决方案:
- http://tech.pro/tutorial/1075/javascript-highlighting-selected-text
相关文章:
- 添加新数据时D3.JS条形图列偏移量
- 当偏移量改变时滚动顶部
- 引导数据偏移量底部
- 可以在调整窗口大小时重新调整stellar.js的元素偏移量
- 可滚动元素,如何在调整大小时更改顶部偏移量
- 使用JavaScript日期的任何时间的时区偏移量
- 时刻时区:UTC 偏移量差异
- jQuery偏移量顶部没有'工作不正常
- 如何获取当前时区偏移量(并正确格式化)
- d3.mouse 偏移量返回的值不正确
- jQuery根据鼠标位置计算DIV偏移量和边界
- 更改 for 循环中 SVG 行的笔触虚线偏移量
- 时区偏移量计算
- jquery 如何设置偏移量 () 值
- 在javascript中向本地时间戳添加时间戳偏移量
- jquery ui draggable中的奇怪偏移量
- 如何在发布JavaScript日期对象时保留时区偏移量
- 如何使用javascript获取&使用字符偏移量设置插入符号位置
- 使用Cesium JS改变标签的偏移量
- window.getSelection()与HTML标签的偏移量