Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Завернуть каждую строку в span (https://javascript.ru/forum/dom-window/80144-zavernut-kazhduyu-stroku-v-span.html)

ethereal 02.05.2020 02:11

Завернуть каждую строку в span
 
Здравствуйте! Подскажите, есть возможность на JS завернуть каждую строку текста в span?

Пример, есть такой код:
<div>
  Lorem Ipsum is simply 
  dummy text of the printing 
  and typesetting industry.
</div>


Превратить его в это:
<div>
  <span>Lorem Ipsum is simply</span>
  <span>dummy text of the printing</span>
  <span>and typesetting industry.</span>
</div>


Спасибо!

Malleys 02.05.2020 05:53

Цитата:

Сообщение от ethereal
Подскажите, есть ли возможность на JS завернуть каждую строку текста в span?

Конечно есть!

<div>
  Lorem Ipsum is simply 
  dummy text of the printing 
  and typesetting industry.
</div>

<style>
span {
	display: inline-block;
	background: deeppink;
	margin: 1em;
	padding: 1em;
}
</style>

<script>
var node = document.querySelector("div");
node.normalize();
var textNode = node.firstChild;

if(textNode.nodeType === Node.TEXT_NODE) 
	node.append(...textNode.textContent.trim().split(/\r?\n/).map(text => {
		const span = document.createElement("span");
		span.textContent = text;
		return span;
	}));

textNode.remove();
</script>


Или так... но тут может возникнуть проблема из-за того, что внутри может быть элемент, внутри которого может быть перевод строки.
<div>
  Lorem Ipsum is simply 
  dummy text of the printing 
  and typesetting industry.
</div>

<style>
span {
	display: inline-block;
	background: deeppink;
	margin: 1em;
	padding: 1em;
}
</style>

<script>
var node = document.querySelector("div");
node.innerHTML = node.innerHTML.trim().split(/\r?\n/).map(v=>`<span>${v}</span>`).join("");
</script>

ethereal 02.05.2020 22:03

Второй вариант подходит, спасибо! Не подскажешь еще как сделать что б работало если есть больше блоков с текстом?

Vlasenko Fedor 03.05.2020 23:31

<div>
  Lorem Ipsum is simply
  dummy text of the printing
  and typesetting industry.
</div>
<div>
  Lorem Ipsum is simply
  dummy text of the printing
  and typesetting industry.
</div>
<style>
  span {
    display: inline-block;
    background: deeppink;
    margin: 1em;
    padding: 1em;
  }

</style>

<script>
document.querySelectorAll("div").forEach(node => node.innerHTML = node.innerHTML.replace(/(.+)\r?\n/g, '<span>$1</span>'));
</script>

Вариант :dance:


Часовой пояс GMT +3, время: 06:41.