我希望 var text 生成的每个单词都在单独的 <span> 标记内

Question

我目前在此处加载我的网站时生成文本https://www.droolstudios.co.uk/home。我现在正在进行一些更改，并希望每个单独的工作都在 <span></span> 中生成。

HTML

        var i = 0;
        var txt = 'Branding. Websites. Design & Creative Services. We turn your vision into reality.';
        //var txt = 'Turning your creative visions into reality with ease and care.... and we also do dog sitting.';

        function typeWriter() {
            if (i < txt.length) {
                document.getElementsByClassName('js-typewrite')[0].innerHTML += txt.charAt(i);
                i++;
                setTimeout(typeWriter, 95);
           
            }
        }

        setTimeout(typeWriter, 1000);

    <section>
            <div class="home-intro">
                <div class="sub-heading">
                    <span class="typewrite anim-typewrite js-typewrite"></span>
                </div>

            </div>
        </section>

有人有什么想法吗？

Answer 1

我用 span 标签嵌入 var txt 的每个单词生成新的 var 结果，然后你只需在你想要的地方生成你的 html。

var txt = 'Branding. Websites. Design & Creative Services. We turn your vision into reality.';

var sp0 = txt.split(" "); // split by space

var result = sp0.map( (w) => "<span>" + w + "</span>").join("");
console.log(result)

join 命令将数组转换为一行，如果要保留数组，请不要执行该命令

Answer 2

你在寻找这样的东西吗？

        var i = 0;
        var txt = 'Branding. Websites. Design & Creative Services. We turn your vision into reality.';
        //var txt = 'Turning your creative visions into reality with ease and care.... and we also do dog sitting.';
        let splitted=txt.split(" ");

        function typeWriter() {
            if (i < splitted.length) {
                document.getElementsByClassName('js-typewrite')[0].innerHTML += splitted[i]+ " ";
                i++;
                setTimeout(typeWriter, 395);
           
            }
        }

        setTimeout(typeWriter, 1000);

    <section>
            <div class="home-intro">
                <div class="sub-heading">
                    <span class="typewrite anim-typewrite js-typewrite"></span>
                </div>

            </div>
        </section>