Как обернуть текст в JavaScript?

Question

У меня есть текст в div с каждым символом моего текста, заключенным в тэг span:

Text = A quick brown fox jumps

<div id="span_text">
<span>A</span><span>&nbsp;</span><span>q</span><span>u</span><span>i</span><span>c</span><span>k</span><span>&nbsp;</span><span>b</span><span>r</span><span>o</span><span>n</span><span>&nbsp;</span><span>f</span><span>o</span><span>x</span><span>&nbsp;</span><span>j</span><span>u</span><span>m</span><span>p</span><span>s</span>
</div>

Проблема в том, что слова не переносятся вокруг , так как каждый символ заключенв теге span.Есть ли способ обернуть текст, как в MS Word и других редакторах, когда символы заключены в span ???

Почему мне нужно заключать каждый символ в span?На самом деле я делаю базовый репетитор.Всякий раз, когда нажимается клавиша, я должен:

1. Выделить символ серым цветом, если был введен действительный символ.
2. Выделить красный символ, если был введен неправильный символ.
3. Выделите следующий символ, который нужно напечатать, зеленым.

Таким образом, чтобы нацелить каждый символ, я должен заключить их в диапазон и дать каждый диапазонуникальный идентификатор, чтобы выбрать их через jQuery.

Answer 1

Действительно ли <span>&nbsp;</span> необходим?

Если вы можете просто избежать переноса этого 1 символа в промежутке, он должен быть перенесен очень хорошо. Я не могу представить, почему вам нужно стилизовать неразрывный пробел или получить к нему доступ с помощью JavaScript. Если да, то почему?

С остальными персонажами все в порядке, но я думаю, что вы можете переместить   и не оборачивать его в промежуток.

Answer 2

function GetWrapedText(text, maxlength) {    
    var resultText = [""];
    var len = text.length;    
    if (maxlength >= len) {
        return text;
    }
    else {
        var totalStrCount = parseInt(len / maxlength);
        if (len % maxlength != 0) {
            totalStrCount++
        }

        for (var i = 0; i < totalStrCount; i++) {
            if (i == totalStrCount - 1) {
                resultText.push(text);
            }
            else {
                var strPiece = text.substring(0, maxlength - 1);
                resultText.push(strPiece);
                resultText.push("<br>");
                text = text.substring(maxlength - 1, text.length);
            }
        }
    }
    return resultText.join("");
}

Answer 3

После просмотра комментариев я наконец-то сделал это, не заключая каждый символ в тег "span". Я сделал два пролета. Один для печатных символов и другой для текущего персонажа. При каждом событии keyup я обновляю содержимое div, заменяя текущий HTML обновленным HTML. Ниже приведена основная логика, которую я использую:

var Text = "The quick brown fox jumps over the lazy dog. It was dark and quiet in the room.";
var ChTyped = 0; // Number of characters typed so far

function update(){
  var StringTyped = Text.substr(0, ChTyped);
  var StringCurrent = '<span class="l-active">' + Text.substr(ChTyped, 1) + '</span>';
  var StringRemaining = Text.substr(ChTyped+1);
}

$("#typingbox").on('keyup', function(e){
  ChTyped++;
  update();
});

Спасибо всем ...

Answer 4

Попробуйте это:

(function () {
    var a = document.getElementById("span_text");
    a.innerHTML = a.innerHTML.replace(/<\/span><span>/g, "\n").replace(/<\/?span>/g, "");
    a.style.whiteSpace = "pre";
    a.style.width = "1.5em";
    a.style.overflow = "scroll";
}());

Answer 5

Вытащить их из div, если они не должны быть там?

Поместить все, что вы хотите, чтобы обернуть внутри div?