Выделите текст в JavaScript, как Evernote Web Clipper

Question

мое текущее решение является:

1. Получить выбранный HTML (включить текст и HTML тег), а именно: selText
2. HighlightText = <span>selText</span>
3. Найти selText в innerHTML из тело или документ (или элемент, который мышь перетащили)
4. Заменить на highlightText

Но если документ: a a a a a a, и пользователь выбирает последние a. Моя функция выделит первый или все a.

Любое предложение?

спасибо.

Answer 1

Я думаю, что ваш вопрос продублирован, так или иначе я просто обыскал интернет и нашел это article.

Ниже конечного кода, чтобы достичь того, что вы спросите

function highlightSelection() { 
    var selection; 

    //Get the selected stuff 
    if(window.getSelection) 
    selection = window.getSelection(); 
    else if(typeof document.selection!="undefined") 
    selection = document.selection; 

    //Get a the selected content, in a range object 
    var range = selection.getRangeAt(0); 

    //If the range spans some text, and inside a tag, set its css class. 
    if(range && !selection.isCollapsed) 
    { 
    if(selection.anchorNode.parentNode == selection.focusNode.parentNode) 
    { 
     var span = document.createElement('span'); 
     span.className = 'highlight-green'; 
     range.surroundContents(span); 
    } 
    } 
} 

Я также нашел эту библиотеку rangy, который является помощником вы можете использовать, чтобы выбрать текст, но работает только с JQuery, так что я предпочитаю первый ваниль-JS решение ,

var el = $("<span></span>"); 
el.text(rangy.getSelection().getRangeAt(0).toString()); 
rangy.getSelection().getRangeAt(0).deleteContents(); 
rangy.getSelection().getRangeAt(0).insertNode(el.get(0)); 
rangy.getSelection().getRangeAt(0).getSelection().setSingleRange(range); 

На Range и Selection User

Вы должны выбрать диапазон, используя Document.createRange, которые возвращают объект Range, прежде чем вы можете использовать Range.surroundContents(), вы можете создать диапазон таким образом.

var range = document.createRange(); 
range.setStart(startNode, startOffset); 
range.setEnd(endNode, endOffset); 

На практике вы будете следовать this guide понимать диапазон и выбор tecniques. Наиболее важный момент содержится в этом коде

var userSelection; 
if (window.getSelection) { 
    userSelection = window.getSelection(); 
} 
else if (document.selection) { // should come last; Opera! 
    userSelection = document.selection.createRange(); 
} 

После этого вы можете использовать

userSelection.surroundContents()