Jak Zawinąć / Otoczyć Podświetlony Tekst Elementem
Chcę zawinąć zaznaczony tekst do kontenera div z span, czy to możliwe?
Użytkownik wybierze tekst i kliknie przycisk, na przycisk kliknij Zdarzenie chcę zawinąć wybrany tekst z elementem span. Zaznaczony tekst mogę pobrać za pomocą window.getSelection()
, ale jak poznać jego dokładną pozycję w strukturze DOM?
6 answers
Jeśli zaznaczenie jest całkowicie zawarte w pojedynczym węźle tekstowym, można to zrobić za pomocą surroundContents()
metoda zakresu uzyskanego z wyboru. Jest to jednak bardzo kruche: nie działa, jeśli zaznaczenie nie może być logicznie otoczone pojedynczym elementem(ogólnie, jeśli zakres przekracza granice węzłów, chociaż nie jest to dokładna definicja ). Aby to zrobić w ogólnym przypadku, potrzebujesz bardziej skomplikowanego podejścia.
Również DOM Range
i window.getSelection()
nie są obsługiwane w IE Rangy do normalizacji zachowania przeglądarki, a moduł applier klasy może okazać się przydatny do tego pytania.
Simple surroundContents()
przykład jsFiddle: http://jsfiddle.net/VRcvn/
Kod:
function surroundSelection(element) {
if (window.getSelection) {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0).cloneRange();
range.surroundContents(element);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-02 22:11:50
function wrapSelectedText() {
var selection= window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span= document.createElement("span");
span.style.backgroundColor = "yellow";
span.appendChild(selectedText);
selection.insertNode(span);
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus gravida magna, quis interdum magna mattis quis. Fusce tempor sagittis varius. Nunc at augue at erat suscipit bibendum id nec enim. Sed eu odio quis turpis hendrerit sagittis id sit amet justo. Cras ac urna purus, non rutrum nunc. Aenean nec vulputate ante. Morbi scelerisque sagittis hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla tristique ligula fermentum tortor semper at consectetur erat aliquam. Sed gravida consectetur sollicitudin.
<input type="button" onclick="wrapSelectedText();" value="Highlight" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-04 16:04:35
To możliwe. Musisz użyć interfejsu API range i Range.metoda surroundContents (). Umieszcza węzeł, w którym zawartość jest owinięta na początku określonego zakresu. zobacz https://developer.mozilla.org/en/DOM/range.surroundContents
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-13 09:45:44
SurroundContents działa tylko wtedy, gdy zaznaczenie zawiera tylko tekst i nie zawiera HTML. Oto bardziej elastyczne, a także między przeglądarkami rozwiązanie. To wstawi taki span:
<span id="new_selection_span"><!--MARK--></span>
Zakres jest wstawiany przed zaznaczeniem, przed najbliższym otwierającym się znacznikiem HTML.
var span = document.createElement("span");
span.id = "new_selection_span";
span.innerHTML = '<!--MARK-->';
if (window.getSelection) { //compliant browsers
//obtain the selection
sel = window.getSelection();
if (sel.rangeCount) {
//clone the Range object
var range = sel.getRangeAt(0).cloneRange();
//get the node at the start of the range
var node = range.startContainer;
//find the first parent that is a real HTML tag and not a text node
while (node.nodeType != 1) node = node.parentNode;
//place the marker before the node
node.parentNode.insertBefore(span, node);
//restore the selection
sel.removeAllRanges();
sel.addRange(range);
}
} else { //IE8 and lower
sel = document.selection.createRange();
//place the marker before the node
var node = sel.parentElement();
node.parentNode.insertBefore(span, node);
//restore the selection
sel.select();
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-04 01:21:34
Oto próba ogólnego rozwiązania, które pozwala na przekraczanie granic elementów. Prawdopodobnie nie miesza się dobrze z obrazkami itp., ani nie tekst od lewej do prawej, ale powinien być OK z prostymi przypadkami.
Po pierwsze, oto bardzo ogólna funkcja do przechodzenia węzłów tekstu w poddrzewie zdefiniowanym przez obiekt Range, od lewej do prawej. To da nam cały tekst, którego potrzebujemy w kawałkach:
function walkRange(range) {
let ranges = [];
let el = range.startContainer;
let elsToVisit = true;
while (elsToVisit) {
let startOffset = el == range.startContainer ? range.startOffset : 0;
let endOffset = el == range.endContainer ? range.endOffset : el.textContent.length;
let r = document.createRange();
r.setStart(el, startOffset);
r.setEnd(el, endOffset);
ranges.push(r);
/// Move to the next text container in the tree order
elsToVisit = false;
while (!elsToVisit && el != range.endContainer) {
let nextEl = getFirstTextNode(el.nextSibling);
if (nextEl) {
el = nextEl;
elsToVisit = true;
}
else {
if (el.nextSibling) el = el.nextSibling;
else if (el.parentNode) el = el.parentNode;
else break;
}
}
}
return ranges;
}
To wykorzystuje tę funkcję narzędzia do uzyskania pierwszego (po lewej) węzła tekstowego w podtytuł:
function getFirstTextNode(el) {
/// Degenerate cases: either el is null, or el is already a text node
if (!el) return null;
if (el.nodeType == 3) return el;
for (let child of el.childNodes) {
if (child.nodeType == 3) {
return child;
}
else {
let textNode = getFirstTextNode(child);
if (textNode !== null) return textNode;
}
}
return null;
}
Po wywołaniu walkRanges
, możesz po prostu użyć surroundContents
na tym, co zwraca, aby faktycznie wykonać podświetlenie/zaznaczenie. Tutaj jest w funkcji:
function highlight(range, className) {
range = range.getRangeAt ? range.getRangeAt(0) : range;
for (let r of walkRange(range)) {
let mark = document.createElement('mark');
mark.className = className;
r.surroundContents(mark);
}
}
I unhighlight (zakładając, że użyłeś unikalnej nazwy klasy dla podświetlenia):
function unhighlight(sel) {
document.querySelectorAll(sel).forEach(el => el.replaceWith(...el.childNodes));
}
Przykładowe użycie:
highlight(document.getSelection(), 'mySelectionClassName');
unhighlight('.mySelectionClassName')
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-26 07:57:55
Proszę znaleźć poniższy kod będzie pomocny dla owijania znacznika span dla wszystkich rodzajów tagów. Proszę przejść przez kod i użyć logiki dla swojej implementacji.
getSelectedText(this);
addAnnotationElement(this, this.parent);
function getSelectedText(this) {
this.range = window.getSelection().getRangeAt(0);
this.parent = this.range.commonAncestorContainer;
this.frag = this.range.cloneContents();
this.clRange = this.range.cloneRange();
this.start = this.range.startContainer;
this.end = this.range.endContainer;
}
function addAnnotationElement(this, elem) {
var text, textParent, origText, prevText, nextText, childCount,
annotationTextRange,
span = this.htmlDoc.createElement('span');
if (elem.nodeType === 3) {
span.setAttribute('class', this.annotationClass);
span.dataset.name = this.annotationName;
span.dataset.comment = '';
span.dataset.page = '1';
origText = elem.textContent;
annotationTextRange = validateTextRange(this, elem);
if (annotationTextRange == 'textBeforeRangeButIntersect') {
text = origText.substring(0, this.range.endOffset);
nextText = origText.substring(this.range.endOffset);
} else if (annotationTextRange == 'textAfterRangeButIntersect') {
prevText = origText.substring(0, this.range.startOffset);
text = origText.substring(this.range.startOffset);
} else if (annotationTextRange == 'textExactlyInRange') {
text = origText
} else if (annotationTextRange == 'textWithinRange') {
prevText = origText.substring(0, this.range.startOffset);
text = origText.substring(this.range.startOffset,this.range.endOffset);
nextText = origText.substring(this.range.endOffset);
} else if (annotationTextRange == 'textNotInRange') {
return;
}
span.textContent = text;
textParent = elem.parentElement;
textParent.replaceChild(span, elem);
if (prevText) {
var prevDOM = this.htmlDoc.createTextNode(prevText);
textParent.insertBefore(prevDOM, span);
}
if (nextText) {
var nextDOM = this.htmlDoc.createTextNode(nextText);
textParent.insertBefore(nextDOM, span.nextSibling);
}
return;
}
childCount = elem.childNodes.length;
for (var i = 0; i < childCount; i++) {
var elemChildNode = elem.childNodes[i];
if( Helper.isUndefined(elemChildNode.tagName) ||
! ( elemChildNode.tagName.toLowerCase() === 'span' &&
elemChildNode.classList.contains(this.annotationClass) ) ) {
addAnnotationElement(this, elem.childNodes[i]);
}
childCount = elem.childNodes.length;
}
}
function validateTextRange(this, elem) {
var textRange = document.createRange();
textRange.selectNodeContents (elem);
if (this.range.compareBoundaryPoints (Range.START_TO_END, textRange) <= 0) {
return 'textNotInRange';
}
else {
if (this.range.compareBoundaryPoints (Range.END_TO_START, textRange) >= 0) {
return 'textNotInRange';
}
else {
var startPoints = this.range.compareBoundaryPoints (Range.START_TO_START, textRange),
endPoints = this.range.compareBoundaryPoints (Range.END_TO_END, textRange);
if (startPoints < 0) {
if (endPoints < 0) {
return 'textBeforeRangeButIntersect';
}
else {
return "textExactlyInRange";
}
}
else {
if (endPoints > 0) {
return 'textAfterRangeButIntersect';
}
else {
if (startPoints === 0 && endPoints === 0) {
return "textExactlyInRange";
}
else {
return 'textWithinRange';
}
}
}
}
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-16 10:32:06