如何用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. 突出显示要输入的下一个字符是绿色。

因此，为了定位每个字符，我必须将它们包含在span中，并为每个span提供唯一ID以通过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

如果他们不需要在那里，让他们离开div？

把你想要的东西放在div里面？

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

在查看了评论后，我终于在没有将每个字符括在“span”标签中。我做了两个跨度。一个用于键入字符，另一个用于当前字符。在每个keyup事件中，我通过用更新的HTML替换当前HTML来更新div内容。以下是我使用的基本逻辑：

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();
});

谢谢你们...