我有一个<div>with some text<div>
我需要突出显示用户选择的文本片段。
我已经部分实现了这个: 这是我的代码 http://jsfiddle.net/Greatshock/fy09jo8w/8/
thisRespondHightlightText(".container");
function thisRespondHightlightText(thisDiv){
$(thisDiv).on("mouseup", function () {
var selectedText = getSelectionText();
var selectedTextRegExp = new RegExp(selectedText,"g");
var text = $(this).text().replace(selectedTextRegExp, "<span class='highlight'>" + selectedText + "</span>");
$(this).html(text);
});
}
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
}
return text;
}
.highlight {
background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
但是,我一直致力于解决以下问题:
- 即使文本中有多个匹配项,我也需要突出显示用户选择的确切片段。例如,如果用户选择第二个字母
t
in the <div>with some text<div>
, 只有这样t
应突出显示,而不是全部或第一个。
- 当用户选择全文时,它不会突出显示,但仍保持选中状态。
- 我如何在移动设备上实现此功能?问题是
mouseup
事件没有被触发。
Update
选择 https://developer.mozilla.org/en-US/docs/Web/API/Range & Range https://developer.mozilla.org/en-US/docs/Web/API/Selection API
以下演示使用以下内容:
选择API
.getSelection() https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
.getRangeAt() https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
范围API
.extractContents() https://developer.mozilla.org/en-US/docs/Web/API/Range/extractContents
.insertNode() https://developer.mozilla.org/en-US/docs/Web/API/Range/insertNode
各种各样的
.createElement() https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
.appendChild() https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
.ctrlKey https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey
.textContent https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
.tagName https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName
.parentNode https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode
.removeChild() https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
.createTextNode() https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode
Just select
text + ctrl (Mac: select
text + ^) and it will wrap a <mark>
tag around the selected text. To remove the highlight click
+ alt (Mac: click
+ ⌥)
Demo 1
选择和范围 API
function mark(e) {
if (e.ctrlKey) {
var sel = document.getSelection();
var rng = sel.getRangeAt(0);
var cnt = rng.extractContents();
var node = document.createElement('MARK');
node.style.backgroundColor = "orange";
node.appendChild(cnt);
rng.insertNode(node);
sel.removeAllRanges();
}
}
function unmark(e) {
var cur = e.currentTarget;
var tgt = e.target;
if (tgt.tagName === 'MARK') {
if (e.altKey) {
var txt = tgt.textContent;
tgt.parentNode.replaceChild(document.createTextNode(txt), tgt);
}
}
cur.normalize();
}
document.addEventListener('keyup', mark); // ctrl+keyup
document.addEventListener('mouseup', mark);// ctrl+mouseup
document.addEventListener('click', unmark); // alt+click
::selection {
background: orange
}
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</P>
::selection https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
尝试伪元素::selection
Demo 2
::selection {
background: orange;
}
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</P>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)