如何在Laravel Blade模板中嵌入HTML代码实现可复制iframe片段展示

问题原因 #

你当前直接把HTML字符串append到div中的写法，会让浏览器把内容识别为DOM节点直接渲染，所以无法展示源码。要实现源码展示，需要把HTML的特殊字符转义为HTML实体，让浏览器将其判定为普通文本处理。

解决方案 #

方案1（最简实现，无需额外工具）

直接用jQuery的.text()方法写入内容，该方法会自动转义所有HTML特殊字符，不会触发DOM解析：

1. 先优化Blade模板（搭配<pre><code>保留代码格式，空格、缩进不会错乱）：

<div name="" id="textArea">
  <pre><code></code></pre>
</div>

2. 修改后的jQuery代码：

$(document).on("click", "#embedLink", function () {
    var $codeArea = $("#textArea pre code");
    var url = $('#headerInput').val();
    $("#framInput").val(url);
    // 生成要展示的iframe代码字符串
    var iframeCode = '<iframe id="ifrm" src="'+url+'" width="100%" height="600" frameborder="0" disable></iframe>';
    // 用text方法写入，自动转义不渲染
    $codeArea.text(iframeCode);
});

方案2（不修改模板的兼容写法）

如果不想改动原有Blade模板，直接给原div用.text()写入即可：

$(document).on("click", "#embedLink", function () {
    var textArea=$("#textArea");
    var url = $('#headerInput').val();
    $("#framInput").val(url);
    var iframeCode = '<iframe id="ifrm" src="'+url+'" width="100%" height="600" frameborder="0" disable></iframe>';
    textArea.text(iframeCode);
});

拓展：手动转义实现（适合自定义场景） #

如果需要自行控制转义逻辑，可以用下面的转义函数处理代码字符串后再写入：

// HTML特殊字符转义函数
function escapeHtml(str) {
  return str.replace(/[&<>"']/g, function(match) {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return escapeMap[match];
  });
}

// 调用示例
textArea.html(escapeHtml(iframeCode));

内容的提问来源于stack exchange，提问作者Habibur Rahman