更新

Question

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

理想情况下，我正在搜索一个IFRAME - 我可以链接的服务以及JSON get被加载并显示为HTML的URL，但是我想指定一个搜索字符串，该字符串应该突出显示或包含搜索的整行字符串应突出显示。 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>

用于获取和打印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，请查看他们的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));
  }
});

如果您想删除动态功能＆amp;加载时突出显示只需将逻辑从事件监听器中移出：

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

JSON漂亮的印花与突出显示

1 个答案:

更新