Как на php можно кликнув по слову в тексте выполнить его замену?

Например, таким образом:

Код (Javascript):

1. document.querySelector('div').addEventListener('click', function(e) {
2.     let txt = this.textContent,
3.         sel = window.getSelection(),
4.         range = sel.getRangeAt(0),
5.         startPos = txt.lastIndexOf(' ', range.startOffset),
6.         endPos = txt.indexOf(' ', range.startOffset);
7.     startPos = startPos !== -1 ? startPos + 1 : 0;
8.     endPos = endPos !== -1 ? endPos : txt.length;
9.  
10.     alert(txt.substring(startPos, endPos));
11. });

Что нужно учесть при обработке:
1. При клике на пробельном символе - получаем пробел
2. Вместе со словом, будут захватываться знаки препинания
2.1. При очистке от знаков препинания, не забывайте, что могут быть слова, разделенные дефисом: как-то, где-то и т.д. Кстати, подобные сокращения ("т.д.", "т.п.") тоже нужно учитывать.

 

У вас есть индекс первого и последнего символа в слове. Конкатенируем: подстрока от 0 до startPos + "НовоеСлово" + подстрока от endPos до длина текста. Получаем на выходе такой результат:

Код (Javascript):

1. /* ... */
2. this.textContent = txt.substring(0, startPos) + newWord + txt.substring(endPos, txt.length);
3. /* ... */

--- Добавлено ---
Раздел "PHP для профи" плавно переквалифицировался в раздел "JavaScript"

 

@Medvedoc нафиг jquery, используй нативный

 

@Medvedoc ajax это javascript, jquery это javascript

 

Тут особо нечего переделывать. Разве что установка обработчика события и получение/запись текстового содержимого элемента:

Код (Javascript):

1. $('div').on('click', function(e) {
2.     let txt = $(this).text(),
3.     //... остальное без изменений
4. });

jQuery - это библиотека, написанная на нативном (чистом) JS. Если еще проще, то jQuery - это набор методов (функций), которые написаны обычным языком JavaScript. Например, в jQuery можно добавить метод "getClickWord", в которой будет код типа такого, как я показал выше, а вы, как пользователь, будуте только применять этот метод к определенному элементу: $('div').getClickWord();
Этих функций огромное количество, но в реальности, вы используете только какой-то маленький их процент. При этом, библиотека, которая весит очень не мало, всё равно вся грузится в клиенте, что утяжеляет страницы сайта.

В чем проблема? Вы можете Ajax-ом передавать только позицию клика "range.startOffset", а все действия с текстом производить на сервере.

 

Зачем тут php то?
Когда ты увидел страницу в браузере , то php уже отработал на сервере(именно на сервер) и завершил работу.
В браузере его нет(если только ввиде обычного текста , с целью чтения глазами) и не должно быть.
Чтобы заставить работать php, нужно отправить get, post, put, delete к серверу. (т.е. перейти по ссылке , отправить форму, отправить запрос к php из ajax/js и т.д.).

В браузере может работать js и отправлять запросы к php и получать данные от сервера и выводить на страницу.
И задача твоя решается на js.

 

@Medvedoc, вы словами опишите последовательность действий и что должно при этом происходить, тогда будет над чем подумать. А пока у вас в коде какая-то несуразица

 

Исходя из вашего кода, там не пахнет никаким textarea, но не важно. Меня больше смущает второй пункт:

То же самое слово из переменной?

 

@Medvedoc, пробуйте такой вариант

Код (Javascript):

1. const newWord = 'Medvedoc',
2.     mydiv = document.getElementById('mydiv');
3. document.getElementById('foo').addEventListener('click', () => {
4.     mydiv.contentEditable = !mydiv.isContentEditable;
5.     mydiv.focus();
6. });
7. mydiv.addEventListener('click', () => {
8.     if (mydiv.isContentEditable) {
9.         return false;
10.     }
11.     let txt = mydiv.textContent,
12.         sel = window.getSelection(),
13.         range = sel.getRangeAt(0),
14.         startPos = txt.lastIndexOf(' ', range.startOffset),
15.         endPos = txt.indexOf(' ', range.startOffset);
16.     startPos = startPos !== -1 ? startPos + 1 : 0;
17.     endPos = endPos !== -1 ? endPos : txt.length;
18.  
19.     let word = txt.substring(startPos, endPos),
20.         insertion = word.split('|').filter(el => el !== newWord).length === 0 ? word + '|' + newWord : newWord;
21.  
22.     mydiv.textContent = txt.substring(0, startPos) + insertion + txt.substring(endPos, txt.length);
23. });

 

Змените:

Код (Javascript):

1. // строка
2. let word = txt.substring(startPos, endPos),
3. // на эту
4. let word = txt.substring(startPos, endPos).replace(/^\(?|\)?$/g,''),
5.  
6. // и участок кода
7. word + '|' + newWord
8. // на этот
9. '(' + word + '|' + newWord + ')'

Два остальных вопроса гораздо сложнее, чем вы себе можете представить. Во первых, заменяя пробельный символ на другой, мы как бы убираем границу между словами и для корректной работы остального кода, нужно вносить существенные правки. А что касается подсветки при наведении, то тут еще сложней задача, т.к. в работу с текстом вмешивается HTML-код.
--- Добавлено ---
На скорую руку набросал вам примерчик, без замены пробелов, но на доскональную проверку нет времени. Поэтому допиливать будете уже сами

 

Я вам написал:

Не объяснили, да и не имеет значения, т.к. я уже объяснил, что на решения таких задач, требуется совсем не 10-15 минут. А у меня, как и у многих других на форуме, есть своя работа, а в выходные еще и своими делами заняться хочется.

 

Код (Javascript):

1. insertion = word === ' ' || word === '' ? '_' : (word.split('|').filter(el => el !== newWord).length === 0 ? '(' + word + '|' + newWord + ')' : newWord);