带有突出显示的JSON漂亮打印

JSON pretty print with highlighting

本文关键字：JSON 漂亮 打印 显示      更新时间：2023-09-26

我想在网页上漂亮地打印JSON，并突出显示其中的一些文本/行。

理想情况下，我正在搜索一个IFRAME——我可以链接到的服务，以及JSON加载并显示为HTML的URL，但我想指定一个搜索字符串，它应该突出显示，或者包含搜索字符串的整行应该突出显示。JSON是公开的，因此不存在隐私问题。

如果没有这样的服务，是否有支持高亮显示的Javscript库？

更多地关注你关于iframe的问题——这本身就是一个问题。如果域名不相同，就不可能在iframe中执行您想要的操作。然而，在这种情况下，同源政策有一些变通办法可以帮助您。

理想情况下，您从中提取的服务支持jsonp，这样您就不必处理iframe，并且可以对json响应执行您喜欢的操作，而无需担心同源策略。

正如我之前的回答中所提到的，你可以使用Pretify来应用语法高亮显示，尽管你不能高亮显示特定的行（根据我目前的发现）。对于这个示例，我将使用GitHub API。

对于HTML，您会有：

<pre id="jsonCode" class="prettyprint lang-json"></pre>

以及获取并漂亮地打印JSON响应的JavaScript（如果愿意，请切换jquery）：

$.getJSON('https://api.github.com/users/trevorsenior?callback=?', 
    function(data) {
        var jsonString = JSON.stringify(data, null, 4);
        $('#jsonCode').text(jsonString);
        prettyPrint(); //apply syntax highlighting to to JSON
    });

您可以在此处查看工作演示：http://plnkr.co/edit/RiDtloVflmfuOrAokNXE?p=preview

如果你真的决定使用Pretify，看看他们的入门指南。

更新

为了完全回答您的问题，通过用指定的类将文本包装在<span>标记中，可以很容易地将突出显示添加到某些文本中。我在前一个例子的基础上又举了一个例子：http://plnkr.co/edit/FM6Ua4pOvMW7nFFggdBy?p=preview

简而言之：

.highlighted {
  background-color: #ff0;
}

$('#search').keyup(function() {
  var search = $('#search').val();
  if(jsonString.match(search)) {
    var regex = new RegExp(search, 'g');
    var highlighted = '<span class="highlighted">' + search + '</span>';
    var newJsonString = jsonString.replace(regex, highlighted);
    $('#jsonCode').html(prettyPrintOne(newJsonString));
  } else {
    $('#jsonCode').html(prettyPrintOne(jsonString));
  }
});

如果要删除动态功能&加载时高亮显示只需将逻辑从事件侦听器中移出即可：

var highlight = function(jsonString, searchFor) {
    var regex = new RegExp(searchFor, 'g');
    var highlighted = '<span class="highlighted">' + searchFor + '</span>';
    var newJsonString = jsonString.replace(regex, highlighted);
    return prettyPrintOne(newJsonString);
};

在你用代码填充区域之前调用它

$('#jsonCode').html(highlight(jsonString, 'X-RateLimit'));

演示：http://plnkr.co/edit/be3SNq1TzeiPKXohXOk9?p=preview

相关文章：