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

Most efficient way to trasform chars in multi span while maintaining html format

本文关键字：格式 html 方式 有效 转换 字符      更新时间：2023-09-26

我正在开发一个javascript库，动画与随机图表条目的div。我需要将每个字符转换为div，并保持html格式。
最有效的方法是什么?
例子:

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

为:

<div class="base_container">
    <span id="char_1">H</span>
    <span id="char_2">i</span>
    <span id="char_3"> </span>
    <span id="char_4">E</span>
    <span id="char_5">l</span>
    <span id="char_6">i</span>
    <span id="char_7">a</span>
    <span id="char_8">,</span>
    <br>
    <span id="char_9">w</span>
    <span id="char_10">h</span>
    .
    .
    .
</div>

提前感谢!最困难的部分是维护html格式!

说明HTML格式中的任何标签，而不仅仅是<br>:

    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 elem = document.getElementsByClassName('base_container')[0];
var content = elem.innerHTML;
// Do some crazy stuff with regex and string parsing
elem.innerHTML = content;

希望对你有帮助。

我会这样做:

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("");
相关文章：