Добавить что-то в выделенный текст с помощью jquery

Question

Я пытаюсь добавить тег <a> в выделенный текст, когда пользователь щелкнул правой кнопкой мыши по нему. Искал по стеку, совпадений не найдено.

Answer 1

Работа с выделенным текстом надежно - это немного сложный кросс-браузер. Там может быть полезной библиотека Тима Дауна Rangy, он сглаживает многие особенности браузера. (Даже если вы не хотите использовать библиотеку, вы можете изучить ее для техник.)

Один из core Rangy demos окружает выделенный текст элементом, используя the RangyRange#surroundContents method. Код, что в демо-версии выглядит следующим образом:

function getFirstRange() { 
    var sel = rangy.getSelection(); 
    return sel.rangeCount ? sel.getRangeAt(0) : null; 
} 
function surroundRange() { 
    var range = getFirstRange(); 
    if (range) { 
     var el = document.createElement("span"); 
     el.style.backgroundColor = "pink"; 
     try { 
      range.surroundContents(el); 
     } catch(ex) { 
      if ((ex instanceof rangy.RangeException || Object.prototype.toString.call(ex) == "[object RangeException]") && ex.code == 1) { 
       alert("Unable to surround range because range partially selects a non-text node. See DOM Level 2 Range spec for more information.\n\n" + ex); 
      } else { 
       alert("Unexpected errror: " + ex); 
      } 
     } 
    } 
} 

Вы бы делать то же самое, но с a, а не span.

Answer 2

EDIT Заметил, что вы говорили о выбранном тексте слишком поздно.

Возможно, вы можете проверить document.elementFromPoint, поддерживается только в FireFox.

Вы ищете что-то вроде этого:

Html:

<div id="rightclick"> 
Right Click me: 
</div>​ 

Javascript:

$("#rightclick").mousedown(function(e) { 
    if (e.which === 3) { 
     $(this).append("<a href='http://www.google.com'>Link</a>"); 
    } 
}); 
​ 

Смотреть демо: http://jsfiddle.net/BgW7x/2/