Я хотел бы реализовать такую функцию на веб-странице: при вызове он проверяет, есть ли какой-либо текст (часто отображаемый как перевернутый цветной текст) на странице, если да, вставьте элемент <img src="my.png"/> непосредственно перед первым словом выбора.Вставка элемента непосредственно перед выбранным текстом
Чистый JavaScript или код jQuery приветствуются, желательно jQuery. Спасибо.
Я могу предложить вам это решение:
$('#butt').click(function(){
var sel = window.getSelection();
if (sel.toString().length>0) {
var key = sel.anchorNode.compareDocumentPosition(sel.focusNode) & Node.DOCUMENT_POSITION_PRECEDING
? 'focus' : 'anchor';
var $elem = $(sel[key+'Node']), txt = $elem.text(), offset = sel[key+'Offset'];
var $f = $(document.createTextNode(txt.slice(0, offset)));
$elem.replaceWith($f);
$(document.createTextNode(txt.slice(offset))).insertAfter($f);
$('<img src=http://dystroy.org/flore/icon.png>').insertAfter($f);
}
});
Кроме того, он должен быть проверен, что на первом месте - якорный узел или узел фокусировки: http://stackoverflow.com/questions/10710733/dom-determine-if-the-anchornode-or-focusnode-is-on левая сторона Выбор может быть сделан слева направо и справа налево. Это определяет узлы привязки и фокусировки. Очень сложно ... –
@ Насмон Вы правы. Исправлена. –
Не так много, но ситуации с текстом, удаленным из потока, будут нарушены: http://jsbin.com/ilisay/1/edit –
<div id="test">
<span class="spanthatcontainstext">test</span>
</div>
$(function(){
var checkfortext = $('.spanthatcontainstext').length;
if(checkfortext){
$(checkfortext).prepend('<img src="" />');
} else {
//do something if there is no text
}
});
Итак, что вы пробовали? –
Возможно, это [обсуждение] (http://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text) может помочь. Замените оповещение функцией [jQuery .append] (http://api.jquery.com/append/). – MrSo
Проблема заключается в том, что выбор может переплетаться внутри и из нескольких элементов DOM и иерархии. Подумайте о случае, когда выбор начинается в середине некоторого div, выбирает остальную часть этого div, некоторый текст в родительском div, затем вниз во вложенный список, а затем, возможно, div, который находится в потоке, но был абсолютно позиционирован в верхней части страницы. Что означает «до выбора» в данном случае? –