瀏覽器顯示 < 和 > 而不是 <>

Question

我正在使用 Typewriter JavaScript 插件創建一個非常簡單的 HTML 頁面。

該頁面基本上應該輸入一個基本 Java 程序的代碼，其中每個聲明的變量都是我的聯系方式之一。

問題是，如果我寫<span class="standard-highlight">List&lt;String&gt; list = Arrays</span> <span class="standard-highlight">List&lt;String&gt; list = Arrays</span>時，瀏覽器不顯示List<String> list =而是顯示List<String> list = List<String> list = 。

我怎樣才能解決這個問題？

這是瀏覽器（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();

Answer 1

下面的代碼對我來說很好用。

<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 符號。