如何用在浏览器中正确呈现的混合的内部和外部 HTML 内容替换内部 HTML 内容

Posted 2023-05-07

【中文标题】如何用在浏览器中正确呈现的混合的内部和外部 HTML 内容替换内部 HTML 内容

【英文标题】：How replace inner HTML content with mixed inner and outer HTML content that is rendered properly in browsers

【发布时间】：2018-07-02 09:22:29

【问题描述】：

我的问题与 html 文档正文之后包含的以下 javascript 相关：

   <script language="javascript">
    function walkText(node) 
      if (node.nodeType == 3) 
        node.data = node.data.replace(/Blah Blah Blah/gi, "<span style=\"font-family: elektora;\">a<span style=\"font-size: 80%\">shen</span> g<span style=\"font-size: 80%\">low</span> g<span style=\"font-size: 80%\">aming</span></span>");
      
      if (node.nodeType == 1 && node.nodeName != "SCRIPT") 
        for (var i = 0; i < node.childNodes.length; i++) 
          walkText(node.childNodes[i]);
        
      
    
    walkText(document.body);
   </script>

请注意，替换文本包含内部和外部 HTML 内容的混合，并且不会在浏览器中相应地呈现。它在浏览器中输出为未经处理的原始 HTML - <span style=\"font-family: elektora;\">a<span style=\"font-size: 80%\">shen</span> g<span style=\"font-size: 80%\">low</span> g<span style=\"font-size: 80%\">aming</span></span>。

如何修改查找和替换代码以在浏览器中以这种方式替换，以便将其视为混合的内部和外部 HTML 内容。目前它用另一个文本字符串替换原始文本字符串，其 HTML 标记不会在浏览器中呈现。

【参考方案1】：

问题的原因是您正在替换文本节点。所以字符串没有呈现。试试下面的代码块

function walkText(node) 
let replacedText = "<span style='font-family: elektora;'>a<span style='font-size: 80%'>shen</span> g<span style='font-size: 80%'>low</span> g<span style='font-size: 80%'>aming</span></span>";
let pattern = /hhh/gi;

  if (node.nodeType == 1 && node.nodeName != "SCRIPT") 

  let indx = node.innerHTML.search(pattern, replacedText);      
  if (indx != -1)
  
      node.innerHTML = node.innerHTML.replace(pattern, replacedText);
  
  else
        
    for (var i = 0; i < node.childNodes.length; i++) 
      walkText(node.childNodes[i]);
    
   
        

walkText(document.body);

【讨论】：

干杯 - 它有效，除了/hhh 显然应该在上面的示例中替换为/Blah Blah Blah。谢谢，好先生。