Javascript 在保持html格式的同时，以多跨度转换字符的最有效方法

我正在开发一个javascript库，用随机图表条目为div设置动画。 我需要用html格式将每个字符转换成一个div
最有效的方法是什么
示例：

<div class="base_container">Hi Elia,<br>what's your name?</div>

你好，伊莉亚，
你叫什么名字？ 进入：

H
我
E
L
我
A.
,


W
H
.
.
.

提前谢谢你！最难的部分是维护html格式

我不会告诉你怎么做，因为这不是你的问题。最好的方法是：

var elem = document.getElementsByClassName('base_container')[0];
var content = elem.innerHTML;
// Do some crazy stuff with regex and string parsing
elem.innerHTML = content;

---

希望对您有所帮助。

考虑HTML格式中的任何标记，而不仅仅是

：

    var i = 0,
        div = $('<div class="base_container">Hi Elia,<br>whats your <b>name</b>?</div>');

    function processContent(element){
        element.contents().each(function(){
            if(this.nodeType == 3){ 
                /* it's safe to process text nodes only */
                var content = this.textContent;
                content = content.replace(/./g, function(a){ return '<span id="char_' + ++i + '">' + a + '</span>'; })

                $(this).replaceWith($(content));
            }else{
                /* recursively process child nodes */
                return processContent($(this));
            }
        });
    }

    processContent(div);


    console.log(div.html());

var i=0，
div=$（“你好，埃利亚，
你叫什么名字？”；
函数processContent（元素）{
element.contents（）.each（函数（））{
如果（this.nodeType==3）{
/*只处理文本节点是安全的*/
var content=this.textContent；
content=content.replace（//g，函数（a）{return'+a+''；}）
$（this）.替换为（$（content））；
}否则{
/*递归处理子节点*/
返回processContent（$（this））；
}
});
}
过程内容（div）；
log（div.html（））；

我会这样做：

var baseContainer = document.querySelector(".base_container");
var textParts = baseContainer.innerHTML.match(/<[^>]+>|&[a-z0-9]+;|./gi);

baseContainer.innerHTML = textParts.map(function (textPart, index) {
    return textPart.length > 1 ? textPart : "<div id='char_" + index + "'>" + textPart + "</div>";
}).join("");

var baseContainer=document.querySelector（“.base_container”）；
var textParts=baseContainer.innerHTML.match（/]+>|和[a-z0-9]+|./gi）；
baseContainer.innerHTML=textParts.map（函数（textPart，索引）{
返回textPart.length>1？textPart:“+textPart+”；
}).加入（“”）；

内部是否只有

标记，或者可能会出现其他任何内容？这不考虑可能的格式，例如

其他标记

，它支持标记嵌套。这就是你的意思吗？你是对的，但它将任何

序列作为HTML标记，这是不正确的。你是对的，textNode中的

不应被视为标记（我已经编辑了我的答案）。另一方面，您可以用html编写自己的标记，这样就可以在html中使用

（不是由

createTextNode

创建的）。在chrome中，它的工作速度比你的方法快4倍。在这个

“你将如何处理a<10和b>13”

文本上尝试它。它可能确实工作得更快，但根据我的经验，如果你正在解决任何与上下文相关的问题，请使用这种与上下文相关的方法。因此，如果我们谈论的是HTML，没有比使用HTML相关方法更好的解决问题的方法了。我可能错了。。。

var baseContainer = document.querySelector(".base_container");
var textParts = baseContainer.innerHTML.match(/<[^>]+>|&[a-z0-9]+;|./gi);

baseContainer.innerHTML = textParts.map(function (textPart, index) {
    return textPart.length > 1 ? textPart : "<div id='char_" + index + "'>" + textPart + "</div>";
}).join("");