Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.05.2020, 02:11
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 94

Завернуть каждую строку в 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>


Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 02.05.2020, 05:53
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от 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>
Ответить с цитированием
  #3 (permalink)  
Старый 02.05.2020, 22:03
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 94

Второй вариант подходит, спасибо! Не подскажешь еще как сделать что б работало если есть больше блоков с текстом?
Ответить с цитированием
  #4 (permalink)  
Старый 03.05.2020, 23:31
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<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>

Вариант
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как преобразовать строку в шаблонную строку (template literals) daima Элементы интерфейса 5 01.09.2017 17:14
Обернуть каждую строку в контейнере в тег snovapavel jQuery 2 16.03.2015 20:17
Как получить в JQUERY каждую строку как отдельный объект? Alex1233 Общие вопросы Javascript 3 22.08.2014 06:54
Вставить значение переменных в строку someone Общие вопросы Javascript 2 03.11.2013 00:14
span внутри span lamer Общие вопросы Javascript 5 11.02.2013 16:50