Оборачивание целого слова в тег, как реализовать?

Question

[Максим]

В общем ситуация такая , если в блоке есть слова в теге то скрипт работает , но если эти же слова подгрузились ajax то регулярное выражение не работает , вот оно :

var container = document.getElementById("load_div");
var str = container.innerHTML;
container.innerHTML = str.replace(/\b[^\s]+?\b/g, $0 => `<p class="chat">${$0}</p>`);

Смысл в том что бы каждое слово целиком которое было введено в форме после того как попало на страницу было обёрнуто в тег <p class="chat"></p> но как сказано - повторюсь это не работает ! Как обернуть слова в теги ?
Вот скрин того что выходит :

Answer 1

[Falseclock]

https://jsfiddle.net/Falseclock/5k69ysyL/

var container = document.getElementById("load_div");
var str = container.innerText;
var words = str.split(/\s/);
while (container.hasChildNodes()) {
		container.removeChild(container.lastChild);
}
  
words.forEach(function (item,idx) {
	var el = document.createElement('p');
  el.setAttribute("class","chat");
  el.innerText = item;
  container.appendChild(el);
} )

Comments

[Максим]

так же как и было

[Falseclock]

что вставляет слова в load_div и как они туда передаются?

здесь то все работает
https://jsfiddle.net/Falseclock/5k69ysyL/

[Максим]

Falseclock: у тебя почта в google есть ?

[Falseclock]

Максим Ленский: все ответы в профиле

[Максим]

Falseclock: отправил письмо тебе

[Falseclock]

Максим Ленский: 1. оператор \b с русским плохо работает. Поэтому строки надо сплитить по пробелам
2. Текст надо хранить без тегов, иначе потом будет неразбериха
3. Код, который переводит все строки надо обернуть в функцию и вызывать ее при каждой подгрузке.

[Falseclock]

Максим Ленский: 4. Код сработает только 1 раз и то не факт.

[Максим]

Falseclock: надо чат то оформить , а как стилизовать слова без тегов ?

[Максим]

Falseclock: тогда этот код не вариант ... статичный текст я умею оборачивать ... а вот из под ajax всё утро ушатал уже на это

[Falseclock]

Максим Ленский:

var auto_refresh = setInterval(
    function(){
        $('#load_div').load('123.txt');
		var container = document.getElementById("load_div");
		var str = container.innerText;
		var words = str.split(/\s/);
		while (container.hasChildNodes()) {
			container.removeChild(container.lastChild);
		}
		  
		words.forEach(function (item,idx) {
		  var el = document.createElement('p');
		  el.setAttribute("class","chat");
		  el.innerText = item;
		  container.appendChild(el);
		} );
    }, 1000);

[Falseclock]

Максим Ленский: вообще у вас реализация глупая. Вы каждый раз делаете одно и то же.
по идее должно быть так:

1. Пользователь вводит текст, и нажимает кнопку submit.
2. через AJAX строка уходит на сервер и записывается в файл.
3. через JS в div дописать новое слово или реплику без перезагрузки страницы.
4. текст чата хранить построчно.

у вас же получается человек написал, вся страница перегрузилась и все заново перерисовалось.

[Falseclock]

Максим Ленский: все верно. Просто сделайте следующее: после $('#load_div').load('123.txt'); сделайте console.log($('#load_div')); и посмотрите свойства у этого DOM элемента. Надо понимать, что innerHTML и innerText - вещи разные, а childNodes и children - тоже вещи не одинаковые.

[Falseclock]

и зачем вы записываете <br> в текстовый файл? ставьте другой разделитель.
в общем у вас все не не правильно и не будет работать.

если хотите нормально научиться программировать на JS, то избавьтесь от jquery и используйте prototypejs.org

потому что jquery - это большая помойка скриптов и модулей, которые сводят на нет вообще суть программирования. Люди перестают понимать что такое DOM, объекты и их свойства и как с ними оперировать.

[Falseclock]

Максим Ленский: , . . HTML ?

[Falseclock]

...

[Falseclock]

Falseclock: ?

[Falseclock]

what is going on?

[Falseclock]

vot chto proishodit kogda HTML hranyat v TXT polyah. Nachinayutsya bugs. Tut my i stolknulis s etim bagom

[Falseclock]

v obshem u vasy vse neprvavilno i budet glyuchit' kak zdes.

[Falseclock]

!!!

[Максим]

Falseclock: because of this ?

[Falseclock]

Максим Ленский: whn you storing TXT data and mixing it with HTML, this leads to bugs in the future.

A vivid example of this bug that happened here. ))) DO NOT STORE HTML in TEXT data if it is initially was TEXT.

[Максим]

Falseclock: it turns out that to put the chat in the database ?

[Falseclock]

Максим Ленский: if chat accept only small replics without EOL, then store them line by line. It will let you easely separate chat messages by EOL symbols.

[Максим]

Falseclock: good idea ! thanks for the help , already toster it is not convenient to communicate , thanks again

[Максим]

Falseclock: ?