<span id="text">
		<a href="http://xdan.ru/Zamenit-videlennij-tekst-na-stranice-s-pomoshhju-JS.html">Вернуться на сайт</a><br>
		<a href="examples/selection1.html">Пример 1 </a>- просто получаем выделенный текст и html со страницы<br>
		<a href="examples/selection2.html">Пример 2 </a>- автоматически переводим выделенный на странице текст с помощью Google Translate AJAX API<br>
		<a href="examples/selection3.html">Пример 3 </a>- тоже самое что и пример 2 только работа ведется с фреймом, это актуально для WYSIWYG редакторов, и отличается рядом нюансов<br>
	</span>

<div id="text">Пример</div>

<button>Заменить</button>
function swapSelection(swapText) {
  var sel = window.getSelection ? window.getSelection() : document.selection.createRange();
  if (sel != "") {
    if (sel.getRangeAt) {
      var range = sel.getRangeAt(0);
      var newNode = document.createElement("span");
      newNode.setAttribute('class', 'swapclass');
      range.surroundContents(newNode);
    } else {
      sel.pasteHTML('<span class="swapclass">' + sel.htmlText + '</span>');
    }
    $('.swapclass').replaceWith(swapText);
  }
}

$('button').click(function () {
  swapSelection("night");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js