0

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

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

如果没有这样的服务，是否有支持突出显示的 JavaScript 库？

4

1 回答 1

3

更多地关注您关于 iframe 的问题 - 这本身就是一个问题。如果域名不同，就不可能在 iframe 中做你想做的事。但是，有一些针对同源策略的解决方法可以在这种情况下为您提供帮助。

理想情况下，您从中提取的服务支持，因此您不必处理 iframe，并且可以使用 json 响应做您喜欢的事情，而不必担心同源策略。

正如我之前的回答中提到的，您可以使用Prettify来应用语法突出显示，尽管您不能突出显示特定的行（从我目前发现的内容来看）。对于本示例，我将使用 GitHub API。

对于 HTML，您将拥有：

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

以及用于获取和漂亮打印 JSON 响应的 JavaScript（如果您愿意，可以切换出

$.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

于 2013-07-25T16:31:20.403 回答