浏览器显示而不是<>

问题描述 投票:0回答:1

我正在使用Typewriter JavaScript插件创建一个非常简单的HTML页面。

该页面本质上应该键入基本Java程序的代码,其中每个声明的变量都是我的联系方式之一。

问题是,如果我写<span class="standard-highlight">List&lt;String&gt; list = Arrays</span>,浏览器不会显示List<String> list =,而是显示List&lt;String&gt; list =

我该如何解决?

以下是浏览器(Chrome)中输出的摘录Snippet from output in browser (Chrome)

下面的JavaScript:

function setupTypewriter(t) {
var HTML = t.innerHTML;

t.innerHTML = "";

var cursorPosition = 0,
    tag = "",
    writingTag = false,
    tagOpen = false,
    typeSpeed = 10,
    tempTypeSpeed = 0;

var type = function() {

    if (writingTag === true) {
        tag += HTML[cursorPosition];
    }

    if (HTML[cursorPosition] === "<") {
        tempTypeSpeed = 0;
        if (tagOpen) {
            tagOpen = false;
            writingTag = true;
        } else {
            tag = "";
            tagOpen = true;
            writingTag = true;
            tag += HTML[cursorPosition];
        }
    }
    if (!writingTag && tagOpen) {
        tag.innerHTML += HTML[cursorPosition];
    }
    if (!writingTag && !tagOpen) {
        if (HTML[cursorPosition] === " ") {
            tempTypeSpeed = 0;
        }
        else {
            tempTypeSpeed = (Math.random() * typeSpeed) + 30;
        }
        t.innerHTML += HTML[cursorPosition];
    }
    if (writingTag === true && HTML[cursorPosition] === ">") {
        tempTypeSpeed = (Math.random() * typeSpeed) + 30;
        writingTag = false;
        if (tagOpen) {
            var newSpan = document.createElement("span");
            t.appendChild(newSpan);
            newSpan.innerHTML = tag;
            tag = newSpan.firstChild;
        }
    }

    cursorPosition += 1;
    if (cursorPosition < HTML.length - 1) {
        setTimeout(type, tempTypeSpeed);
    }

};

return {
    type: type
};
}

var typer = document.getElementById('typewriter');

typewriter = setupTypewriter(typewriter);

typewriter.type();

`

javascript html
1个回答
0
投票

下面的代码对我来说很好。

<span class="standard-highight" id="app"></span>

    <script>
    var app = document.getElementById('app');
    var typewriter = new Typewriter(app, {
        loop: true 
});
    typewriter.typeString('<span>List&lt;String&gt; list = Arrays</span>').start();
    </script>

将传递给typeString()函数的字符串放置在任何html标记内,然后函数将呈现HTML符号。

© www.soinside.com 2019 - 2024. All rights reserved.