JSON漂亮打印，突出显示 [英] JSON pretty print with highlighting

问题描述

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

I would like to pretty print JSON on a web page and highlight some text / lines in it.

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

Ideally I am searching for a IFRAME - service to which I can link and URL where the JSON get's donwloaded and displayed as HTML, but I would like to specify an search string, which should be highlighted or the whole line containing the search string should be highlighted. The JSON is public so there is no privacy issue.

如果没有这样的服务，是否有一个Javscript库支持突出显示?

If there is no such service, is there a Javscript library which supports highlighting?

推荐答案

重点关注有关iframe的问题-这是中的问题本身.如果域名不同，则无法在iframe中做您想做的事情.但是，针对同源政策的一些变通办法可以在这种情况下为您提供帮助.

Focusing in more on your question about iframes - it's an issue in itself. It's not possible to do what you want in an iframe if the domain names aren't the same. However there are some workarounds for the same-origin policy that could help you in this situation.

理想情况下，您要从中提取的服务支持 jsonp 因此您不必处理iframe，就可以对json响应执行自己喜欢的操作，而不必担心同源策略.

Ideally the service you're pulling from supports jsonp so you don't have to deal with iframes and can do what you like with the json response without worrying about the same-origin policy.

如我的先前答案所述，您可以使用 GitHub API .

As mentioned in a previous answer of mine you can use Prettify to apply syntax highlighting, though you can't highlight a specific line (from what I've found so far). For this example I'll be using the GitHub API.

对于HTML，您将:

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

和要获取并漂亮地打印JSON响应的JavaScript(切换 jquery (如果需要):

And the JavaScript to fetch and pretty print the JSON response (switch out jquery if you'd like):

$.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 =预览

You can look at a working demonstration here: http://plnkr.co/edit/RiDtloVflmfuOrAokNXE?p=preview

如果您决定使用Prettify，请查看他们的获得的信息开始指南.

If you do decide to use Prettify take a look at their getting started guide.

要完全回答您的问题，只需将文本包装在具有指定类的<span>标记中，就可以轻松地在其中突出显示某些文本.我整理了另一个基于上一个示例的示例: http://plnkr .co/edit/FM6Ua4pOvMW7nFFggdBy?p = preview

To fully answer your question, it is easy enough to add in highlighting to some text by wrapping the text in <span> tags with a specified class. I've thrown together another example of this that builds off of the previous one: 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));
  }
});

---

如果要删除动态功能&突出显示负载时，只需将逻辑从事件侦听器中移出即可:

---

If you want to remove the dynamic functionality & highlight on load simply move the logic out from the event listener:

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);
};

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

And call it just before you populate the area with the code

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

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

这篇关于JSON漂亮打印，突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！