当前位置:首页 > 文章列表 > Golang > Go问答 > 读取 JSON 字符串数据中的 HTML 标签会在浏览器中引发渲染问题

读取 JSON 字符串数据中的 HTML 标签会在浏览器中引发渲染问题

来源:stackoverflow 2024-02-19 17:18:25 0浏览 收藏

欢迎各位小伙伴来到golang学习网,相聚于此都是缘哈哈哈!今天我给大家带来《读取 JSON 字符串数据中的 HTML 标签会在浏览器中引发渲染问题》,这篇文章主要讲到等等知识,如果你对Golang相关的知识非常感兴趣或者正在自学,都可以关注我,我会持续更新相关文章!当然,有什么建议也欢迎在评论留言提出!一起学习!

问题内容

我有一个基本的 web 服务器,它从 json 帖子数据库呈现博客帖子,其中主要段落是根据 json 字符串数组构建的。我试图找到一种轻松编码新行或换行符的方法,但发现这些值的编码如何从 json 更改为 golang,最后更改为 html 网页,遇到了很多困难。当我尝试使用换行符对 json 进行编码时,我发现必须使用 \\n 而不仅仅是 \n 来对它们进行编码,以便它们实际出现在我的页面上。然而,一个问题是它们只是显示为文本而不是换行符。

然后,我尝试研究将连接的字符串数组的 \n 部分替换为
标记的方法,但是我找不到任何方法来使用 go 执行此操作,并转而尝试在 javascript 中执行此操作。尽管我推迟了从 html 链接中调用 javascript,但这也不起作用。这就是 javascript:

var title = window.document.getelementbyid("title");
var timestamp = window.document.getelementbyid("timestamp");
var sitemap = window.document.getelementbyid("sitemap");
var main = window.document.getelementbyid("main");
var contact_form = window.document.getelementbyid("contact-form");
var content_info = window.document.getelementbyid("content-info");

var str = main.innerhtml;

function replacenewlines() {
    // replace the \n with 
str = str.replace(/(?:\r\n|\r|\n)/g, "
"); // update the value of paragraph main.innerhtml = str; }

这是我的 html:




    
    
    
    dynamic json events
    


    

{{.title}}

{{.parsedmain}}

然后,我最终尝试将
标签硬编码到我的 json 数据中,发现当它最终到达浏览器时,它只是呈现为 < 和 >。我对这个编码过程感到非常沮丧,不断地导致我在创建换行符和换行符时出现问题。如何轻松地在 json 字符串数据中包含换行符?

这是我的 go 脚本(如果有帮助的话):

package main

import (
    "encoding/json"
    "html/template"
    "log"
    "net/http"
    "os"
    "regexp"
    "strings"
)

type blogpost struct {
    title      string   `json:"title"`
    timestamp  string   `json:"timestamp"`
    main       []string `json:"main"`
    parsedmain string
}

// this did not seem to work when i tried to implement it below
var re = regexp.mustcompile(`\r\n|[\r\n\v\f\x{0085}\x{2028}\x{2029}]`)
func replaceregexp(s string) string {
    return re.replaceallstring(s, "
\n") } var blogtemplate = template.must(template.parsefiles("./assets/docs/blogtemplate.html")) func bloghandler(w http.responsewriter, r *http.request) { blogstr := r.url.path[len("/blog/"):] + ".json" f, err := os.open("db/" + blogstr) if err != nil { http.error(w, err.error(), http.statusnotfound) return } defer f.close() var post blogpost if err := json.newdecoder(f).decode(&post); err != nil { http.error(w, err.error(), http.statusinternalservererror) return } post.parsedmain = strings.join(post.main, "") // post.parsedmain = replaceregexp(post.parsedmain) if err := blogtemplate.execute(w, post); err != nil { log.println(err) } } func teapothandler(w http.responsewriter, r *http.request) { w.writeheader(http.statusteapot) w.write([]byte("

htcptp

im a teapot")) } func faviconhandler(w http.responsewriter, r *http.request) { http.servefile(w, r, "./assets/art/favicon.ico") } func main() { http.handle("/", http.fileserver(http.dir("/assets/docs"))) http.handlefunc("/blog/", bloghandler) http.handlefunc("/favicon.ico", faviconhandler) http.handlefunc("/teapot", teapothandler) log.fatal(http.listenandserve(":8080", nil)) }

这是我的 json 数据的示例:

{
    "title" : "Finished My First Blog App",
    "timestamp": "Friday, March 18th, 11:39 AM",
    "main": [
        "It took me awhile to tidy everything up but I finally finished creating my first ",
        "blog app using Go along with JSON for my database. I plan on using this to document ",
        "my own thoughts and experiences as a programmer and cybersecurity researcher; things ",
        "like tutorials, thought-pieces, and journals on my own projects progress will be ",
        "posted here. I look forward to getting more used to writing and sharing my own story, ",
        "I think it will help me learn from doing and also hearing feedback from others.\\n\\n",
        "I utilized a handler function to dynamically read from my JSON database and template ",
        "data into my HTML template using the go html/template package as well as the encoding/json ",
        "to handling reading those objects. Next I had to make sure my CSS and JavaScript assets ",
        "would be served alongside this finished template in order for my styling to be output into ",
        "the browser. For this I used a FileServer function which allowed for me to serve linked ",
        "resources in my HTML boilerplate and have the server still locate blog resources dynamically. ",
        "Going forward I am looking to add better styling, more JavaScript elements to the page, and ",
        "more functionality to how my JSON data is encoded and parsed in order to create more complex ",
        "looking pages and blog posts."
    ]
}

我只是想找到一种方法来轻松地在 json 中的长字符串数组中的段落之间包含空格,但是我在 go 中失败了,我的 js 似乎从未影响我的网页(这不是唯一的)我遇到了这个问题,由于某种原因,它似乎不想影响任何页面元素),而且我似乎无法将
标签直接硬编码到我的 json 中,因为浏览器将这些标签解释为

。我尝试过的任何方法都无法真正让我对换行符进行编码,我在这里能做什么?


正确答案


如果您希望 json 文档包含 html,请执行以下操作:

  1. 将 parsedmain 更改为类型 html.HTML

    type blogpost struct {
         ...
         parsedmain html.html
     }
  2. 分配字段时转换为该类型:

    post.parsedmain = html.html(strings.join(post.main, "")).
  3. 将文档中的``\n替换为
    `。

如果不受信任的用户可以输入 json 文档数据,则应用程序应根据允许列表过滤 html 标记和属性。这可以防止攻击者通过脚本注入发起攻击。

如果要将 json 文档中的换行符转换为 html 中的换行符,请执行以下操作:

  1. 更改文档以包含换行符:\\n -> \n

  2. 在服务器或客户端上,将换行符替换为 html 换行符。为了防止脚本注入攻击,请在插入
    之前转义 html。以下是在服务器上执行此操作的方法:

    type blogpost struct {
         ...
         parsedmain html.html
     }
    
     escapedandjoined := html.escaper(post.main...)
     post.parsedmain = html.html(strings.replaceall(escapedandjoined, "\n", "
    "))).

您可能想要使用

而不是

您可以尝试在模板内循环数组并为数组的每个元素生成 p 标记。这样就不需要在 go 中编辑主数组了。

模板:




    
    
    
    Dynamic JSON Events
    


    

{{.Title}}

{{range $element := .Main}}

{{$element}}

{{end}}

今天关于《读取 JSON 字符串数据中的 HTML 标签会在浏览器中引发渲染问题》的内容就介绍到这里了,是不是学起来一目了然!想要了解更多关于的内容请关注golang学习网公众号!

版本声明
本文转载于:stackoverflow 如有侵犯,请联系study_golang@163.com删除
使用jQuery删除父元素的最后一个子元素使用jQuery删除父元素的最后一个子元素
上一篇
使用jQuery删除父元素的最后一个子元素
如何在Mac上打开和阅读eml文件
下一篇
如何在Mac上打开和阅读eml文件
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    485次学习
查看更多
AI推荐
  • ljg-skills -
    ljg-skills
    ljg-skills 是李继刚开源的 AI 技能与提示词集合,面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板,适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。
    3756次使用
  • MELO音乐 - AI 音乐生成平台,支持多模态创作能力
    MELO音乐
    MELO音乐是一站式AI视频与音乐制作助手,对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐,MELO为你免费谱曲,轻松做同款!
    3468次使用
  • UniScribe - AI 免费在线音视频转文字平台
    UniScribe
    UniScribe 是一款 AI 音视频转文字与内容整理工具,支持上传音频、视频文件或粘贴 YouTube 链接,自动生成转写文本、摘要、思维导图和关键问题,并支持多格式导出,适合会议记录、课程学习、访谈整理和内容创作复盘。
    3437次使用
  • 剧云 - 免费 AI 智能中文剧本创作平台
    剧云
    剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。
    3620次使用
  • 万象有声 - AI 一站式有声内容创作平台
    万象有声
    万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
    3594次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码