Javascript-форум - Как заменить выделенное слово

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Как заменить выделенное слово (https://javascript.ru/forum/events/84556-kak-zamenit-vydelennoe-slovo.html)

Как заменить выделенное слово

Привет. Выделяю слово в тексте. Нужно его потом редактировать и заменить на отредактированное. Сам процесс понятен. Не понятно как заменить слово. Поясняю. В тексте три слова Вася. Я отмечаю второе скажем. Вывожу его в текстовое поле. На этом этапе оно ещё отмечено, пока я его не стал редактировать его. Как поменять в тексте именно это слово? Уже весь мозг сломал.

Вышел на финишную прямую). Осталось решить с одной ф-цией. Итак. Выделяю слово. Кликаю на ссылку и передаю это слово в текстовое поле. Там получаю координаты начала и длину выделенного слова. Редактирую слово и отправляю на сохранение.

function saveText(start,sellected_ln) {

//start - координата начала слова(выделенного)
//sellected_ln - длина слова(выделенного)

    var editor = document.querySelector('#select-text'); // текстовое поле
    var new_text = editor.value; // отредактированное слово
    var new_text_ln = new_text.length;

all_text = document.getElementById('value_2');// контейнер статьи
old_text = $(all_text).html(); // изначальный текст
old_sel = old_text.substr(start,sellected_ln)

new_text = setCharAt(old_text,start,new_text,new_text_ln);

}

И теперь, если так:

function setCharAt(str,index,chr,new_text_ln) {
    if(index > str.length-1) return str;
    return str.substring(0,index) + chr + str.substring(index+new_text_ln);
}

то новый текст заканчивается на изменённом слове. Как правильно написать + str.substring(index+new_text_ln) что бы оно выводило оставшийся текст?

редактирование выделенного

ureech,
:-?

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css"> #value_2 span{
   background-color: #FFFF00;
   color: #008000;
  }
  </style>
</head>
<body>
<input type="text" id="select-text">
<div id="value_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, sint, consectetur iusto esse aliquam consequuntur odio autem numquam error possimus temporibus commodi est aliquid. Earum, aut nisi ex totam a.</div>
<button onclick="insertTxt()">insertTxt</button>
<button onclick="replaceTxt()">replaceTxt</button>
<script>
  let editor = document.querySelector('#select-text');
  let all_text = document.getElementById('value_2');
  let span = document.createElement("span");
  const insertTxt = () => {
  let txt = window.getSelection().toString();
  if(!txt) return;
  let range = window.getSelection().getRangeAt(0);
  let selectionContents = range.extractContents();
  span.appendChild(selectionContents);
  range.insertNode(span);
  editor.value = txt;
  editor.focus()
    }
  const replaceTxt = () => {
  if(span.parentNode) span.replaceWith(editor.value);
  editor.value = span.innerHTML = "";
  }
</script>
</body>
</html>

Блин, пипец.Весь мозг сломал. А ведь пытался в этом направлении мыслить...( Спасибо большое.

И последний вопрос по этой теме. В const insertTxt я строю DOM, текстовое поле и кнопки Save и Cansel. И вставляю с помощью append. $('.icms-content-fields').append(redactor); Как мне это дело отменить при нажатии на Cansel. Именно отменить, а не спрятать. Что бы после отмены можно было опять выполнять скрипт.

ureech,
могу только гадать,

Цитата:

Сообщение от ureech

текстовое поле и кнопки Save и Cansel.

remove() и span.replaceWith(span.textContent); span.textContent = '';

remove() не раюотает или я не правильно использую. span не совсем то. Вот код

let span = document.createElement("span");
const get_selected_text=()=> {
    let txt = window.getSelection().toString();
    if (!txt) return false;     
        let range = window.getSelection().getRangeAt(0);
        let selectionContents = range.extractContents();
        span.appendChild(selectionContents);
        range.insertNode(span);

        var redactor = '';
        redactor += '<div class="mb-3 editor">'
        redactor += '<textarea id="select-text" class="form-control mb-3 mt-3" rows="3" cols="100%"  name="select-text"></textarea>'
        redactor += '<button type="button" onclick="saveText()" class="btn btn-sm  btn-primary mr-3">Save</button>'
        redactor += '<button type="button" onclick="canselText(this)" class="btn btn-sm btn-primary ">Cansel</button>'
        redactor += '</div>'
        $('.icms-content-fields').append(redactor);
        let editor = document.querySelector('#select-text');
        editor.value = txt;
        editor.focus();
}

document.querySelector('.f_content > .value').onmouseup = get_selected_text;

const saveText = () => {
    var editor = document.querySelector('#select-text');
    if (span.parentNode) span.replaceWith(editor.value);
    editor.value = span.innerHTML = "";
    var div = document.querySelector('.f_content > .value');
    var new_text = $(div).html();
...
//ajax запрос
}
function canselText(e){

//?????
}

ureech,
а полноценный, но минимальный макет, никак?

ureech,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .f_content>.value span {
            background-color: #FFFF00;
            color: #008000;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        let span = document.createElement("span");
        const saveText = () => {
            var editor = document.querySelector('#select-text');
            if (span.parentNode) span.replaceWith(editor.value);
            editor.value = span.innerHTML = "";
            $('.mb-3.editor').remove();
            var div = document.querySelector('.f_content > .value');
            var new_text = $(div).html();
            //...
            //ajax запрос
        }

        function canselText(button) {
            $('.mb-3.editor').remove();
            span.replaceWith(span.textContent);
            span.textContent = '';
        }


        const get_selected_text = () => {
            let txt = window.getSelection().toString();
            if (!txt) return false;
            let range = window.getSelection().getRangeAt(0);
            let selectionContents = range.extractContents();
            span.appendChild(selectionContents);
            range.insertNode(span);

            var redactor = '';
            redactor += '<div class="mb-3 editor">'
            redactor += '<textarea id="select-text" class="form-control mb-3 mt-3" rows="3" cols="100%"  name="select-text"></textarea>'
            redactor += '<button type="button" onclick="saveText()" class="btn btn-sm  btn-primary mr-3">Save</button>'
            redactor += '<button type="button" onclick="canselText()" class="btn btn-sm btn-primary ">Cansel</button>'
            redactor += '</div>'
            $('.icms-content-fields').append(redactor);
            let editor = document.querySelector('#select-text');
            editor.value = txt;
            editor.focus();
        }
        $(function() {
            document.querySelector('.f_content > .value').onmouseup = get_selected_text;
        });
    </script>
</head>

<body>
    <div class="icms-content-fields"></div>
    <div class="f_content">
        <div class="value">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, doloremque provident eos recusandae impedit possimus magnam tenetur corporis tempora aspernatur laboriosam repellendus est voluptatibus eum tempore incidunt inventore temporibus
            sit?</div>
    </div>
</body>

</html>