Как разбить строку на отдельные символы-элементы JS?

361

27 мая 2017, 18:16

Есть строка, к примеру:

str = "Шла Саша по шоссе и сосала сушку";

Как разбить строку наотдельные символы и обернуть в тег <span>

string = $(".str").text(); 
str = string.split(''); 
$.each(str, function(i) { 
  $(".str").append('<span class="style">'+str[i]+'</span>'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<div class="str">Шла Саша по шоссе и сосала сушку</div>

Попробовал вот так но не работает, и как заменить после перебора текущий элемент <div class="str">Шла Саша по шоссе и сосала сушку</div> на преобразованный

Answer 1

Возможно способ не лучший, но рабочий и ясный. Разделяем текст с помощью split(""), затем бежим по всем элементам через forEach, создаем элементы через document.createElement, в innerHTML пишем содержимое, а с помощью appendChild добавляем к нужному, к примеру body, элементу новый span.

Пример кода:

var elem =  document.getElementsByClassName('str')[0]; // берем див 
var str = elem.innerText; // берем его текст 
var symbols = str.split(""); // разбиваем на массив символов 
var body = document.getElementsByTagName('body')[0]; // берем элемент body 
 
symbols.forEach(function(item, i, arr) { // в цикле по всем  
  var span = document.createElement('span'); // создаем span 
  span.innerHTML = item; // задаем содержимое span 
  body.appendChild(span); // прикрепляем к body 
}); 
 
//elem.remove(); // удалить наш див 
elem.innerHTML = ''; // или убрать из дива текст

<div class="str">Шла Саша по шоссе и сосала сушку</div>

Обращу внимание на некоторые нюансы. Если будем новые элементы span цеплять к нашему div class="str", а в конце удалим этот див через remove(), то вместе с ним удалятся и его дочерние элементы. Поэтому в комментарии предложил два варианта: замена содержимого дива или удаление дива и прикреплял новое к body

По вашему коду: функция wrap помещает заданное содержимое вокруг выбранных элементов (как бы "обертывая" их) - то есть будет выглядеть как-то не так, как хотелось бы. Можно немного изменить код, заменив wrap на append. Пример кода:

str = $(".str").text().split(''); // берем наш текст и в массив 
$(".str").text(''); // делаем пустой див 
 
$.each(str, function() { // идем по массиву 
  // добавляем к диву наши символы в span 
  $(".str").append('<span class="style">' + this + '</span>'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<div class="str">Шла Саша по шоссе и сосала сушку</div>

Answer 2

split работает.

let str = "Шла Саша по шоссе и сосала сушку"; 
console.log(str.split(''))

Еще можно разбить с помощью spread оператора:

let str = "Шла Саша по шоссе и сосала сушку"; 
((...args) => {console.log(args)})(...str)

Кроме того можно просто перебрать все символы в цикле, без всяких split и spread:

let str = "Шла Саша по шоссе и сосала сушку"; 
for(let char of str) console.log(char);

UP:

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

const div = document.querySelector('.str'); 
div.innerHTML = div.innerText.split('').reduce( (res, char) => `${res}<span>${char}</span>`, '') 
 
// Более развернутый и понятный вариант: 
const div2 = document.querySelector('.str2'); 
let str = div2.innerText; 
let chars = str.split(''); 
let chars_in_span = chars.map(char => `<span>${char}</span>`); 
let new_html = chars_in_span.join(''); 
div2.innerHTML = new_html;

span{ 
  color: red; 
}

<div class="str">Шла Саша по шоссе и сосала сушку</div> 
 
<div class="str2">Шла Саша по шоссе и сосала сушку</div>

Answer 3

можно сделать с помошью split/join или regexp replace:

var string="Шла Саша по шоссе и сосала сушку"; 
//вариант 1 
console.log('%c<span class="style">' + string.split('').join('</span><span class="style">') + '</span>', 'color: red' ); 
//вариант 1 
console.log('%c' + string.replace(/(.)/g, '<span class="style">$1</span>'), 'color: blue');

Answer 4

Родил понятный мне вариант из предложенных выше ответов

str = $(".str").text().split(''); 
modstr = ""; 
$.each(str, function(i) { 
  modstr = modstr + '<span class="style">' + str[i] + '</span>'; 
}); 
$(".str").html(modstr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<div class="str">Шла Саша по шоссе и сосала сушку</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Нужно после выполнения ajax загрузить js файл (существующий), но чтобы первый больше не работал

У меня есть js файл для обработки моего input (там код раскрывания списка и тд

187

javascript

Как получить siblings() по атрибуту

код html

210

javascript

Поиск минимума и максимума в массиве.JavaScript [требует правки]

ЗдравствуйтеЕсть такое задание, никак не могу найти решение

225

javascript

Как в selectmenu ( jq ui) добавить html

256