以字母形式显示文本但保留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>