Как обернуть каждое слово элемента в тег span?

Ответ 1

Это будет немного сложнее, чем это. Вам нужно будет найти все слова и повторно добавить их к элементу, завернутому в промежуток.

var words = $("p").text().split(" ");
$("p").empty();
$.each(words, function(i, v) {
    $("p").append($("<span>").text(v));
});

Живой пример

Ответ 2

Для этой простой задачи вам не нужен jQuery. String.prototype.replace и регулярное выражение должно сделать трюк.

Я просто сделал несколько простых служебных функций, которые обертывают буквы, слова и строки:

/**
 * Wraps a string around each character/letter
 *
 * @param {string} str The string to transform
 * @param {string} tmpl Template that gets interpolated
 * @returns {string} The given input as splitted by chars/letters
 */
function wrapChars(str, tmpl) {
  return str.replace(/\w/g, tmpl || "<span>$&</span>");
}

/**
 * Wraps a string around each word
 *
 * @param {string} str The string to transform
 * @param {string} tmpl Template that gets interpolated
 * @returns {string} The given input splitted by words
 */
function wrapWords(str, tmpl) {
  return str.replace(/\w+/g, tmpl || "<span>$&</span>");
}

/**
 * Wraps a string around each line
 *
 * @param {string} str The string to transform
 * @param {string} tmpl Template that gets interpolated
 * @returns {string} The given input splitted by lines
 */
function wrapLines(str, tmpl) {
  return str.replace(/.+$/gm, tmpl || "<span>$&</span>");
}

Использование довольно простое. Просто перейдите в строку для переноса в качестве первого аргумента. Если вам нужна специальная разметка, передайте ее в качестве второго аргумента, а $& будет заменено на каждый char/word/line.

var str = "Foo isn't equal\nto bar.";
wrapChars(str); // => "<span>F</span><span>o</span><span>o</span> <span>i</span><span>s</span><span>n</span>'<span>t</span> <span>e</span><span>q</span><span>u</span><span>a</span><span>l</span> <span>t</span><span>o</span> <span>b</span><span>a</span><span>r</span>."
wrapWords(str); // => "<span>Foo</span> <span>isn</span>'<span>t</span> <span>equal</span> <span>to</span> <span>bar</span>."
wrapLines(str); // => "<span>Foo isn't equal</span> <span>to bar.</span>"

Ответ 3

Это то, чего вы пытаетесь достичь?

<span><div class="date">Dec 22, 2011</div></span>

Если да:

$('div.date').wrap('<span/>');

Или вы пытаетесь это сделать:

<span>Dec</span> <span>22,</span> <span>2011</span>

Что-то вроде этого shoul делает трюк:

var dateInner = $('div.date');
var wraps = [];
$.each(dateInner.text().split(' '), function (key, value) {
  wraps.push = '<span>' + value + '</span>';
});

dateInner.html(wraps.join(''));

Ответ 4

var $div = $('.words');
var divWords = $div.text().split(/\s+/);
$div.empty();
$.each(divWords, function(i,w){
  $('<span/>').text(w).appendTo($div);
});

Тогда

<div class="words">Why hello there, world!</div>

становится

<div class="words">
  <span>Why</span>
  <span>hello</span>
  <span>there,</span>
  <span>World!</span>
</div>

Ответ 5

Если вы используете jQuery, попробуйте this.

В частности, вы можете найти пример разделения слов здесь

Цитата:

Вот пример метода .letter('words'):

<p class="word_split">Don't break my heart.</p>

<script>
$(document).ready(function() {
  $(".word_split").lettering('words');
});
</script>

Что будет генерировать:

<p class="word_split">
  <span class="word1">Don't</span>
  <span class="word2">break</span>
  <span class="word3">my</span>
  <span class="word4">heart.</span>
</p>

Ответ 6

Мне нужно было дать каждому слову определенный идентификатор, поэтому, будучи новичком, я изучил ранее опубликованный код ответов. Начиная с кода Brad Christie и Daniel Tonon, я использовал .addClass для достижения этого результата:

    $('.mydiv').each(function(){ 
    var words = $(this).text().split(/\s+/);
    var total = words.length;
    $(this).empty();
    for (index = 0; index < total; index ++){
      $(this).append($("<span /> ").addClass("myclass_" + index).text(words[index]));
      }
    })

который выводит:

    <div class="mydiv">
       <span class="myclass_0">bla</span>
       <span class="myclass_1">bla</span>
       <span class="myclass_2">bla</span>
    </div>

начиная с:

    <div class="mydiv">bla bla bla</div>

Он отлично работает для моих нужд. Может быть, некоторые экспертные программисты могут настроить это лучше!

Ответ 7

Просто основанный на Xeon06 отличный ответ.

Мне пришлось сделать это за кратное одному элементу на той же странице.

    $('.element').each(function(){
        var words = $(this).text().split(" ");
        var total = words.length;
        $(this).empty();
        for (index = 0; index < total; index ++){
            $(this).append($("<span /> ").text(words[index]));
        }
    })