Есть такой код взят
отсюда.
Почему он не меняет выделенный текст, а просто удаляет?
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');
});
<html>
<title>Пример#1: получаем выделенный фрагмент страницы с помощью JS</title>
<head>
<script type="text/javascript" src="scriptFile.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<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 onclick="swapSelection()">Заменить</button>
</body>
</html>
