chatGPT都无能为力,靠你们了

我要在前端解析marckdown,后端存储的数据有换行,然后我在后端把换行去除了,dd到浏览器看是这样的:

### 介绍\r\r> 国家地理摄影是一种高质量的动物摄影,能捕捉到任何动物的形象和本质。它们非常适合各种用途,包括个人使用、专业肖像以及营销材料。逼真的国家地理摄影具有高度可定制性,可以根据每位客户的具体需求进行量身定制。\r\r### 优势、特点\r\r- 高质量的摄影技术,捕捉动物的细节和特征\r- 高度可定制,

但是,到前端以后,就又变成了:

 var markdownText = '### 介绍

> 国家地理摄影是一种高质量的动物摄影,能捕捉到任何动物的形象和本质。它们非常适合各种用途,包括个人使用、专业肖像以及营销材料。逼真的国家地理摄影具有高度可定制性,可以根据每位客户的具体需求进行量身定制。

### 优势、特点

- 高质量的摄影技术,捕捉动物的细节和特征
- 高度可定制,满足不同客户的需求
- 适用于各种场景,如个人使用、专业肖像和营销材料

### 实践应用案例

- 某企业为宣传材料采用国家地理摄影的动物照片,增强品牌形象
- 野生动物保护组织用国家地理摄影捕捉濒危动物的影像,提高公众保护意识
- 摄影师为自己的作品集增添国家地理摄影作品,展示个人摄影技巧
- 科研人员使用国家地理摄影记录动物行为,为研究提供珍贵资料
- 旅游公司用国家地理摄影宣传自然旅游景点,吸引游客'

然后js由于有换行就解析报错了,这是为什么,要怎么处理:
1、不要说用``, 会导致解析代码的时候报错
2、{{ }}, {!! !!}都试过了
3、chatGPT4 有问过了,没解决

《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 13

\r去掉,\n保留

1年前 评论
wongvio (楼主) 1年前

var markdownText = ``;

1年前 评论
wongvio (楼主) 1年前
guanguans (作者) 1年前
wongvio (楼主) 1年前

看你的意图,是要把后台存的 Markdown,交给 JavaScript 去解析?

但是你现在这这样直接赋值给 JS 变量的其实还有其他问题,比如,你的 Markdown 里面存在引号怎么办?那不就被意外的截断了?


在以前,这种情况基本上都是使用一个 script 标签,把需要的内容放到 script 标签里面,然后使用 innerHTML 取出来。

<script type="text/markdown">{{ markdown }}</script>
1年前 评论
wongvio (楼主) 1年前

放弃了,靠后端解析好了再给前端了

composer require erusev/parsedown

然后

// 导入 parsedown
use Parsedown;

$parsedown = new Parsedown();

// 将 Markdown 格式的文本转换为 HTML 格式的文本
$html = $parsedown->text('# Hello, world!');
1年前 评论

file

我们是这样给前端的

1年前 评论
var data = @json($model->only('content'));
document.getElementById('content').innerHTML = marked.parse(data.content);
1年前 评论
DogLoML

不直接赋值给js变量,先放到div,然后js中获取,当然我这里用了插件,本质上就是innerHTML获取的

<div id="editormd-view">
    <textarea style="display:none;">{!! $article->content !!}</textarea>
</div>
            // 渲染markdown
            var editormdView;
            editormdView = editormd.markdownToHTML("editormd-view", {
                htmlDecode: "style,script,iframe,footer,aside,section,article,nav,header,video,audio,html,body,link",  // you can filter tags decode
                taskList: true,
                tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
                lineNumber: false
            });
10个月前 评论

存库之前把 \ 换成 \ 就可以了

10个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!