JSON pretty print with highlighting

Question

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

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.

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

Answer 1

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.

---

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.

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.

For the HTML, you would have:

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

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

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

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

---

Update

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

In a nutshell:

.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'));

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