使用 jQuery .html 函数时，如何为锚标签保留 html 原始文件？答案

【问题标题】：How do I keep the html raw for anchor tags when using jQuerys .html function?使用 jQuery .html 函数时，如何为锚标签保留 html 原始文件？
【发布时间】：2017-09-27 22:02:30
【问题描述】：

我有一个要解析为 JSON 的文件。然后我将该文件转换为 html，然后以模式显示。一切都很好，除了它需要我的锚标记并将它们显示为封装在锚中的文本，然后使链接生效。我只是希望它保留原始 html。前任。 <a id="foo" href="google.com">bar<a/> 而不仅仅是 JSON 文件中显示“bar”的实时链接。我尝试使用 .text() 而不是 .html() 但后来它无法读取。

 $.ajax({
    type: "POST",
    data: $.toJSON(param),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    url: "SomePage.aspx/someMethod",
    success: function (data) {
        var myObj = JSON.parse(data.d);

            //put the json file in modal window
            $('#jsonViewTitle').text("H2 Title inside of modal);
            $('#jsonViewBody').html(myObj._jsonfile);
        }
    },
});

使用 .html() 时的示例 - 请注意 JSON 文件比这个长得多，但这应该会给你一个想法。你可以点击“栏”，它会带你到 google.com

      "META": {
        "NAME": "Donald Trump",
        "CREATED": "2017-06-12",
        "UPDATED": "2017-06-12",
        "LANGUAGE": "en",
        "This name changes" "bar"
    },

使用 .text() 的示例

    "META": {"NAME": "Donald Trump","CREATED": "2017-06-12","UPDATED": "2017-06-12","LANGUAGE": "en","This name changes" : "<a id="foo" href="google.com">bar</a>"},

【问题讨论】：

它是什么？要么您希望标签被转义，要么您不希望。您的问题暗示您都不想要。
你能发布一些console.log(data.d)的示例输出
你想显示什么。原始文本还是 html？
我不希望他们这样。有人编辑了我的问题以使其混乱。然后我不得不重新编辑。我想要 html click 而不仅仅是“点击”作为 json 文件中的实时链接。该链接不应处于活动状态。只是原始的 html 作为文本
真的不清楚你在问什么。 text() 看起来像答案，但你明确地说有问题……但你只描述了这个问题是非常模糊的术语。您需要提供真实的minimal reproducible example。阿贾克斯无关紧要。 myObj.jsonfile 的值不是。

标签： javascript html json

【解决方案1】：

此代码将在整个 JSON 文件中搜索尖括号，即<，然后将其替换为小于号的&lt。我添加了 //g 在有多个锚标签的情况下通过正则表达式执行全局匹配

$('#jsonViewBody').html('<pre><code> ' + myObj._jsonfile.replace(/</g, '&lt;') + '</code></pre>');

【讨论】：

@GertArnold。我在上面的 cmets 和答案中添加了解释。

【解决方案2】：

脚本标签可能会有所帮助

<script style="display: block">
    <a id="foo" href="google.com">bar<a/>
</script>

【讨论】：

【解决方案3】：

在模态框内添加特定标签以接受您要插入的代码...

var text = "This is a test sentence";

var foo = "<a href='#'>Test link</a>";

var lorem = "lorem ipsum";

$('#modal #first').text(text);
$('#modal #second').text(foo);
//$('#modal #second').html(foo);
$('#modal #third').text(lorem);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="modal">
 <span id="first"></span>
 <span id="second"> </span>
 <span id="third"> </span>
</div>

您可以将JS的第三行取消注释为html() 选择是您的。

请记住，如果您使用 .text() 或 .html()，它们将覆盖目标 div 中的任何内容，例如你的模态

【讨论】：

解释否决票？您想在模态框内插入一个锚标记作为原始文本而不是可点击的链接。这是一个例子......