时间戳

首页 > 解决方案 > 我希望 var text 生成的每个单词都在单个标签内

javascript - 我希望 var text 生成的每个单词都在单个标签内

问题描述

我目前在此处加载网站时生成文本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>

有人有想法么？

标签： javascripthtmljquerycssvar

解决方案

我用 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命令将数组转换为一行，如果要保留数组，请不要执行该命令

推荐阅读