JSON漂亮打印與突出顯示

Question

我想在網頁上漂亮地打印JSON並突出顯示其中的一些文本/行。

理想情況下，我正在尋找一個IFRAME服務，我可以將其鏈接到URL並將JSON getwired加載並顯示爲HTML，但我想指定一個搜索字符串，該字符串應該突出顯示或包含搜索字符串應該突出顯示。 JSON是公開的，所以沒有隱私問題。

如果沒有這種服務，是否有支持突出顯示的Javscript庫？

Answer 1

專注於更多關於iframe的問題 - 這是一個issue in itself。如果域名不一樣，就不可能在iframe中做你想做的事情。但是，在這種情況下，可以爲您提供同源策略的some workarounds。

---

理想情況下，你是從支撐拉動服務jsonp，所以你不必應付iframe也可以做你無需擔心同源策略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指南。

---

更新

要完全回答你的問題，這是很容易通過與指定類包裝在<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