JSON pretty print with highlighting

Question

Я хотел бы довольно напечатать JSON на веб-странице и выделить некоторые тексты/строки в нем.

В идеале я ищу службу IFRAME, к которой я могу подключиться, и URL, где JSON get загружается и отображается как HTML, но я бы хотел указать строку поиска, которая должна быть выделена, или всю строку, содержащую строка поиска должна быть выделена. JSON является публичным, поэтому нет проблемы с конфиденциальностью.

Если такой службы нет, есть ли библиотека Javscript, которая поддерживает выделение?

Answer 1

Сосредоточение внимания на вашем вопросе об iframe - это issue in itself. Невозможно выполнить то, что вы хотите в iframe, если имена доменов не совпадают. Однако есть some workarounds для той же политики происхождения, которая могла бы помочь вам в этой ситуации.

---

В идеале услуги вы тянете из опора jsonp так что вам не придется иметь дело с и могут фреймы делать то, что вам нравится с ответом JSon, не беспокоясь о политике одного источника.

Как указано в previous answer of mine, вы можете использовать Prettify, чтобы применить подсветку синтаксиса, хотя вы не можете выделить определенную строку (из того, что я нашел до сих пор). В этом примере я буду использовать GitHub API.

Для HTML, вы бы:

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

И JavaScript, чтобы принести и довольно напечатать ответ JSON (переключатель из 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

Если вы решили использовать Prettify, возьмите посмотрите на их руководство getting started.

---

Update

Чтобы полностью ответить на ваш вопрос, достаточно просто добавить в освещении какой-то текст, обернув текст в <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