打印JSON字符串并使用HTML和CSS格式化它
可以通过以下步骤实现：
- 首先，将JSON字符串解析为JavaScript对象。可以使用JSON.parse()方法将JSON字符串转换为JavaScript对象。
- 接下来，创建一个HTML页面，包含一个<div>元素用于显示格式化后的JSON数据。
- 使用JavaScript将解析后的JSON对象转换为格式化的字符串。可以使用JSON.stringify()方法将JavaScript对象转换为JSON字符串，并添加缩进和换行符以增加可读性。
- 将格式化后的JSON字符串插入到<div>元素中。可以使用innerHTML属性将字符串插入到<div>元素中。
- 最后，使用CSS样式对格式化后的JSON数据进行美化。可以使用CSS选择器和属性来设置字体、颜色、边框等样式。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.json-container {
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
border: 1px solid #ccc;
padding: 10px;
background-color: #f5f5f5;
white-space: pre-wrap;
}
</style>
</head>
<body>
<div id="json-container" class="json-container"></div>
<script>
var jsonString = '{"name": "John", "age": 30, "city": "New York"}';
var jsonObject = JSON.parse(jsonString);
var formattedJsonString = JSON.stringify(jsonObject, null, 4);
var jsonContainer = document.getElementById('json-container');
jsonContainer.innerHTML = formattedJsonString;
</script>
</body>
</html>在上面的示例中，我们首先将JSON字符串{"name": "John", "age": 30, "city": "New York"}解析为JavaScript对象。然后，我们创建一个带有id="json-container"的<div>元素，用于显示格式化后的JSON数据。接着，我们使用JSON.stringify()方法将JavaScript对象转换为格式化的字符串，并将其插入到<div>元素中。最后，我们使用CSS样式对<div>元素进行美化，使其具有合适的字体、颜色、边框和背景颜色。
这是一个简单的示例，你可以根据需要自定义CSS样式和JSON数据。
相关·内容
1回答
我正在尝试打印和格式化我的json代码，我从我的数据库和打印它与我的ejs文件和CSS。现在我只是在看一个JSON字符串，我不知道如何格式化，有人知道我应该怎么做吗？我正在尝试做的是让用户创建一个帐户并登录，然后一旦他们登录，他们就能够查看已经创建的事件的详细信息。正如您从屏幕截图中看到的，您可以看到json字符串，但我希望能够将其转换为一些有意
浏览 13提问于2019-12-02得票数 2
1回答
我有一个使用Twitter引导和JQuery (核心)构建的JQuery应用程序。在这个应用程序中，我想显示接收到的JSON。在这页上，就是。我想格式化JSON (漂亮打印)，使其更具可读性。
是否有一种使用HTML、JavaScript和CSS的简单方法来做到这一点？有我可以使用的组件吗？此外，但并不是很重要，我想让用户能够输入构成请
浏览 1提问于2014-08-04得票数 0
我有一个字符串中的css代码和html代码，并希望创建一个.html和.css文件供下载。真的有可能吗？ a.style = "display: none";
浏览 3提问于2016-07-15得票数 0
回答已采纳
VS代码的内置语言特性可以格式化HTML、JS、TS和JSON。您可以使用以下设置： "editor.defaultFormatter": "vscode.html-language-features""[javascriptjs-beautify也可以格式化CSS。但是，如果我打开一个CSS文件，并
浏览 6提问于2021-10-09得票数 3
回答已采纳
2回答
我有一个json的字典，我正在使用python将其传递到jinja中。页面不工作不确定这是否是正确的语法 json_data = json.load(f)-EDIT-这是传递int的json对象中的一个大字典，如下所示
{"Dogs": [["spot"], 1], &qu
浏览 3提问于2016-01-23得票数 3
index.html
我应该能够只更改json键并将其保存回来。注意:我不能使用json.stringify，因为我想要一种JOSN编辑器，我应该只更改键，而不是值，然后保存回去。页面上打印嵌套的JSON对象。JSON对象的格式总是不同的，它不是固定的。它可以是非常复杂的物体。
浏览 2提问于2018-01-03得票数 1
我正在使用VB6生成一个JSON文件，我的一个字符串之间有一个双引号。我使用了双引号转义字符，但现在转义字符也在字符串中打印，尽管JSON在将文件放入JSON格式化程序时是成功的。字符串是：当我使用转义字符并检查它</e
浏览 0提问于2018-06-14得票数 0
回答已采纳
我有一个JSON文件，我想从Java Spring Boot中创建的rest控制器内的API调用中检索其内容。我将.json文件的内容放入一个字符串中，并使用下面的方法(其中之一)来美观地打印。如果我对输出执行system.out.println()，输出会打印得很好，但在浏览器中显示得很粗糙，没有缩进。
浏览 0提问于2019-10-16得票数 1
我已经创建了一个表单，并将请求发送到web api，并获得了json格式的响应。我想在bot中以表格的形式打印响应。String json = //api response
我可以将dtring转换为html表格并显示它吗？我尝试格式化字符串并显示它，但它不起作用。有没有更好的回应表数据的方法？
浏览 8提问于2017-02-20得票数 1
2回答
我正在用一个未格式化的CSS字符串填充我的CodeMirror文本区域。我无法控制这个CSS的格式设置。未格式化CSS示例当我将该字符串设置为CodeMirror文本区域的值时，如下所示：我想让它看起来像这样我尝试过，但是我认为这个函数已
浏览 3提问于2013-12-16得票数 2
据我所知，是一个解析器，我们可以定义语法和动作来解析一些文本。但我不知道该怎么办。我是否必须为解析的JSON创建一些节点并构建一个树？那该怎么做呢？
我在找一些样品，但还没找到。
浏览 0提问于2013-06-22得票数 1
回答已采纳
我使用的是WPF Richtextbox，并使用了在上找到的XAML to HTML转换演示。当我尝试上传具有富文本格式的用户故事时，它会失败，并在CreateResult对象中显示以下错误：这是整个字符串：
"<
浏览 0提问于2013-04-15得票数 1
回答已采纳
4回答
我正在寻找一个用于崇高文本2的格式化/索引工具，它在ctrl+s上转换以下代码到某种程度上 b = a + 2;我找不到有用的东西
浏览 6提问于2016-05-17得票数 1
回答已采纳
1回答
我正在使用标准数字格式字符串(请参阅在我的页面上格式化定价：Dim s As String = (CDec(price) / 100).ToString("F")
结果是我用HTML打印的字符串"3,78“。但是，我希望使用HTML/CSS对小数部分"78“进行迷信。我怎样才能做到呢？
浏览 2提问于2016-04-21得票数 3
回答已采纳
3回答
我希望了解现代方式的文件模板和批处理呈现/生成格式，如PDF和Word。是否有替代基于XSL-FO的产品，例如基于CSS的产品？是否有比XSL-FO更好的/正在出现的标准？我想到了一些解决方案，使用XSL标准指定文档模板，然后使用呈现引擎生成PDF、MS等文档。这些解决方案包括Apache、Ecrion、RenderX和Antenna。我们特别喜欢Ecrion产品，因为它允许一个良好的可视化(业务用户友好)的方式来创建模板。我们热衷于理解替代方案--
浏览 5提问于2015-05-31得票数 1
回答已采纳
3回答
作为一个例子，如果后端是用java/php/python编写的，你可能会看到后端正在“回显/打印”准备好的html到浏览器，对吧。对于几乎完全使用ajax的web应用程序，有没有理由不简单地在没有html的情况下进行通信，例如，仅仅使用在服务器和客户端之间来回传递的JSON对象，而不是在我们的脚本/应用程序后端“打印或回显”html，我们只需回显json字符串
浏览 0提问于2010-10-23得票数 2
HTML <div class="row"> styleUrls: ['./app.component.css']export class AppComponent {
浏览 0提问于2018-07-10得票数 0
现在，我可以使用fs.readFile(__dirname + "slides/slide_0/page.html")和回调将字符串表示发送到客户机，保存字符串并在socket.on('connection另外，我希望page.html能够拥有自己的.js、.css和资源(如上面的文件结构所示)。
可以将导入(link src="..."和script src=&q
浏览 1提问于2015-03-12得票数 2
我需要帮助格式化单数组嵌套的JSON数据，并在浏览器中显示它。我的主要问题是选择一组数据的单个id，对其进行格式化，然后在浏览器上打印出来。到目前为止，我已经成功地使用$('#data').html( JSON.stringify(response));打印了数组，但是不知道如何在浏览器上打印或显示格式化JSON。person":[{"id&
浏览 34提问于2021-11-11得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
