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

У меня есть текст в 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? На самом деле я делаю базовый репетитор по набору текста. Всякий раз, когда клавиша нажата, я должен:

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

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


javascript text word-wrap
person D3 K    schedule 13.12.2011    source источник
comment
Не станут ли они одинокими сами по себе?   -  person James Hill    schedule 14.12.2011
comment
Что вы делаете, что требует, чтобы каждая буква была в пролете? Могут быть лучшие обходные пути.   -  person Mouse Food    schedule 14.12.2011
comment
Mouse Food, я обновил свой вопрос и объяснил причину, по которой я заключаю каждый символ в тег span.   -  person D3 K    schedule 14.12.2011
comment
Я согласен с Mouse Food, должен быть лучший способ сделать это. Например, символы, которые уже были введены, не нужно размещать в отдельных интервалах, верно? Только текущий и следующий символы должны иметь разные стили. Верно?   -  person danludwig    schedule 14.12.2011
comment
Я думал о твоем способе, но он не сработал. Я попробую еще раз и выложу обновление здесь. Спасибо   -  person D3 K    schedule 14.12.2011

Ответы (4)


arrow_upward
2
arrow_downward

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

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

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

person danludwig    schedule 13.12.2011
comment
Привет, livehour, я только что обновил свой вопрос, объясняя причину, по которой я заключаю каждый символ в span. - person D3 K; 14.12.2011

arrow_upward
0
arrow_downward

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

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

person Fabián Heredia Montiel    schedule 13.12.2011

arrow_upward
0
arrow_downward

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

(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";
}());
person austincheney    schedule 13.12.2011

arrow_upward
0
arrow_downward

Просмотрев комментарии, я, наконец, сделал это, не заключая каждый символ в тег «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();
});

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

person D3 K    schedule 14.12.2011