JSON漂亮的印花與突出顯示

Question

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

理想情況下，我正在搜索一個IFRAME - 我可以鏈接的服務和URL，其中JSON get被加載並顯示為HTML，但我想指定一個搜索字符串，應突出顯示或包含搜索字符串的整行應該是突出顯示。 JSON是公開的，因此沒有隱私問題。

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

Answer 1

更多地關注關於iframe的問題 - 這本身就是一個問題 。 如果域名不相同，則無法在iframe中執行您想要的操作。 但是，對於同源策略，有一些解決方法可以幫助您解決這種情況。

---

理想情況下，您所提供的服務支持jsonp，因此您無需處理iframe，並且可以使用json響應執行您喜歡的操作，而無需擔心同源策略。

正如我之前的回答中所提到的，你可以使用Prettify來應用語法高亮，雖然你不能突出顯示特定的行（從我到目前為止所發現的）。 對於這個例子，我將使用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

如果您決定使用Prettify，請查看他們的入門指南。

---

更新

要完全回答您的問題，通過將文本包裝在帶有指定類的<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