以字母形式顯示文本但保留html格式

Question

我需要我的文本保留幾個html格式標記，以便隨着文本的變化改變文本的顏色，並顯示放置在我的文本中的一些圖形圖標。我的代碼從現有的隱藏段落中獲取文本，使段落空白，取消隱藏，然後逐字顯示如下。

 var NextHighlight = HighlightsTop.find('.newhidden').first().closest('p'); // Find the paragraph. 
     // Put the text from this highlight paragraph into a variable and remove it from the paragraph, so that we can put it back letter-by-letter below. 
     var HighlightText = NextHighlight.html(); 
     NextHighlight.html(""); 
     NextHighlight.removeClass('newhidden'); 

     // Add the text back in, letter by letter. 
     showText(NextHighlight, HighlightText, 0, 5);  

.... 

    // The letter-by-letter function. 
    var showText = function (target, message, index, interval) {  
    if (index < message.length) { 
     $(target).append(message[index++]); 
     setTimeout(function() { showText(target, message, index, interval); }, interval); 
     } 
    } 

問題是html標籤現在只顯示爲直線文本。如果我在元素中將'html'更改爲'text'，它不會顯示標籤，但我也沒有獲得格式。

編輯 - 下面UPDATE ....

與下面的答案更新後，我的代碼現在看起來是這樣。我應該指出，當用戶點擊一個按鈕時會發生這種情況，所以我從點擊按鈕開始添加代碼。也許在我看不到的地方有一個錯誤，因爲當我現在單擊按鈕時，我什麼也沒有得到。我在控制檯中也沒有看到任何錯誤，想知道我是否錯過了一次;某處...

$(document).on('click', '.highlight_button', 
    function() { 
     var MatchReportTop = $(this).closest('.match_div'); 
     var HighlightsTop = $(this).closest('.highlights'); 
     var NextHighlight = $('.newhidden').first().closest('p'), HighlightTextNodes = []; 

     // recursively get the text nodes 
     (function recursiveGetTextNodes(node) { 
      if(node.nodeType === 3) { 
      // we're a text node? great, store it. We'll store a clone and the original so we don't lose our place. 
      HighlightTextNodes.push({ 
       active: node, 
       ref: node.cloneNode() 
      }); 
      // clear out the original. 
      node.textContent = ''; 
      } else { 
      // no text node. go deeper. 
      for(var i = 0, len = node.childNodes.length; i < len; i++) { 
       recursiveGetTextNodes(node.childNodes[i]); 
      } 
      } 
     })(NextHighlight.get(0)) 

     // Add the text back in, letter by letter. 
     showText(HighlightTextNodes, 5); 

     if (NextHighlight.hasClass('FullTime')) { 
      CompleteReveal(MatchReportTop); 
     } 
}); 

// The letter-by-letter function. 
function showText(target, interval) { 
    // to know what we're currently working on, we need to filter 
    // the text nodes by a check to see if they are already fully 
    // "typed" out. If the content doesn't match, keep it. Also, 
    // `shift()` off the first one. That's the one we'll edit 
    // this go around. 
    var current = target.filter(function(a){ 
    return a.active.textContent != a.ref.textContent; 
    }).shift(); 

    // if we have a node to work with, the process is not 
    // completed. Once `current` is false, we know we've completed 
    // the process. 
    if (current) { 
    // grab the reference node's text up to the active node's 
    // length +1 to get the current text plus one letter. 
    current.active.textContent = current.ref.textContent.substr(0,current.active.textContent.length + 1); 
    // rinse and repeat. 
    setTimeout(function() { 
     showText(target, interval); 
    }, interval); 
    } 
} 

Answer 1

因此，您希望增量顯示文本，但必須保留HTML。您可以剝離標籤並重新應用它們。您可以在解析文本時忽略這些標籤，並將其全部粘貼。這些是首先想到的一些選項，但我有點不喜歡它們。

如果您重新考慮問題，可能會有更好的解決方案。您只能定位文本節點，並逐漸顯示來自這些文本節點的每個字母。這是我重新考慮後決定實施的計劃。基本流程是這樣的：

1. 收集文本節點，存儲其原始節點（即仍然會附加到DOM）
2. 商店爲參考節點的克隆後
3. 空出來的文字節點
4. 遞歸調用，以查找不參考節點
5. 從參考節點添加一個字母到該節點匹配的第一個節點定時方法
6. 重複，直到所有節點匹配參考節點

// get the `newhidden`'s closest parent paragraph and prepare 
 
// the array that will hold all the text nodes of that paragraph 
 
var NextHighlight = $('.newhidden').first().closest('p'), HighlightTextNodes = []; 
 

 
// recursively get the text nodes 
 
(function recursiveGetTextNodes(node) { 
 
    if(node.nodeType === 3) { 
 
    // we're a text node? great, store it. We'll store a clone 
 
    // and the original so we don't lose our place. 
 
    HighlightTextNodes.push({ 
 
     active: node, 
 
     ref: node.cloneNode() 
 
    }); 
 
    // clear out the original. 
 
    node.textContent = ''; 
 
    } else { 
 
    // no text node. go deeper. 
 
    for(var i = 0, len = node.childNodes.length; i < len; i++) { 
 
     recursiveGetTextNodes(node.childNodes[i]); 
 
    } 
 
    } 
 
})(NextHighlight.get(0)) 
 

 
// Add the text back in, letter by letter. 
 
showText(HighlightTextNodes, 5); 
 

 
// The letter-by-letter function. 
 
function showText(target, interval) { 
 
    // to know what we're currently working on, we need to filter 
 
    // the text nodes by a check to see if they are already fully 
 
    // "typed" out. If the content doesn't match, keep it. Also, 
 
    // `shift()` off the first one. That's the one we'll edit 
 
    // this go around. 
 
    var current = target.filter(function(a){ 
 
    return a.active.textContent != a.ref.textContent; 
 
    }).shift(); 
 
    
 
    // if we have a node to work with, the process is not 
 
    // completed. Once `current` is falsy, we know we've completed 
 
    // the process. 
 
    if (current) { 
 
    // grab the reference node's text up to the active node's 
 
    // length +1 to get the current text plus one letter. 
 
    current.active.textContent = current.ref.textContent.substr(0,current.active.textContent.length + 1); 
 
    // rinse and repeat. 
 
    setTimeout(function() { 
 
     showText(target, interval); 
 
    }, interval); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, impedit <strong class="newhidden">labore <span>test</span> architecto</strong> quasi, possimus hic velit. Quibusdam quisquam illum quae doloremque, quis iste consequatur vero quaerat molestias doloribus dicta facilis.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas iusto laborum hic optio aliquam, adipisci a, dolore rem dolores harum voluptas cum! Similique, velit, commodi. Vero molestias, nobis ducimus nemo.</p>