0

より大きなスクリプトの一部として、別の関数からテキストのブロックを取得し、それを画面に「入力」するページを作成しようとしました。

function typeOut(page,nChar){
  var txt = document.getElementById("text");
  if (nChar<page.length){
    txt.innerHTML = txt.innerHTML + page[nChar];
    setTimeout(function () {typeOut(page,nChar+1);},20);
  }
}

これは基本的に希望どおりに機能しますが、渡すテキスト ブロックに html タグ (リンクなど) が含まれている場合、それらは解釈されずにプレーン テキストとして表示されます。それを回避して、html要素を正しく表示するように強制する方法はありますか?

4

2 に答える 2

3

問題は、その過程で無効な HTML が作成され、ブラウザが修正しようとすることです。どうやら<orを追加>すると、構造を壊さないようにその文字が自動的にエンコードされます。

適切な解決策は、テキストのすべての文字で文字通り機能するわけではありませんが、HTML 要素を要素ごとに処理します。つまり、ソース HTML で要素に遭遇するたびに、その要素を複製してターゲット要素に追加します。次に、そのテキスト ノードを 1 文字ずつ処理します。

これが私が一緒にハッキングした解決策です（つまり、おそらく大幅に改善される可能性があります）：

function typeOut(html, target) {
    var d = document.createElement('div');
    d.innerHTML = html;
    var source = d.firstChild;
    var i = 0;

    (function process() {
        if (source) {
            if (source.nodeType === 3) { // process text node
                if (i === 0) { // create new text node
                    target = target.appendChild(document.createTextNode(''));
                    target.nodeValue = source.nodeValue.charAt(i++);
                // stop and continue to next node
                } else if (i === source.nodeValue.length) { 
                    if (source.nextSibling) {
                        source = source.nextSibling;
                        target = target.parentNode;
                    }
                    else {
                        source = source.parentNode.nextSibling;
                        target = target.parentNode.parentNode;
                    }
                    i = 0;
                } else { // add to text node
                    target.nodeValue += source.nodeValue.charAt(i++);
                }
            } else if (source.nodeType === 1) { // clone element node 
                var clone = source.cloneNode();
                clone.innerHTML = '';
                target.appendChild(clone);
                if (source.firstChild) {
                    source = source.firstChild;
                    target = clone;
                } else { 
                    source = source.nextSibling;
                }
            }
            setTimeout(process, 20);
        }
    }());
}

デモ

于 2013-07-12T07:53:59.517 に答える
-1

コードが機能するはずです。ここの例: http://jsfiddle.net/hqKVe/2/

問題はおそらく、コンテンツのpage[nChar]HTML 文字がエスケープされていることです。

最も簡単な解決策は、jQuery のhtml()機能を使用することです (jQuery を使用している場合)。ここで Canavar によって与えられた良い例があります: jQuery を使用して HTML エンティティをデコードする方法は?

jQuery を使用していない場合は、自分で文字列のエスケープを解除する必要があります。実際には、ここで説明されていることの反対を行ってください: HTML タグを HTML エンティティとしてエスケープする最速の方法は?

于 2013-07-12T07:37:30.847 に答える