记一次使用 php 模板渲染 js 报错

214 阅读1分钟

这个项目是一个较旧的项目 前后端未分离 使用的是 php 框架模板渲染 最近有一个功能 使用的是 json 字符串来进行的数据传递(后端到前端)大概是这个样子

<html>
<!-- h5 部分 略 -->
</html>
<script>
  // 略 
  const data = JSON.parse('{$data}')
  // 略   
</script>

{$data} 是模板语法

问题就出在了 const data = {$data} 中的 {$data}

假设 $data 的值为 '{"text":"测试测试"}' 此时框架编译出的文件是这样

<html>
<!-- h5 部分 略 -->
</html>
<script>
  // 略 
  const data = JSON.parse('{"text":"测试测试"}')
  // 略   
</script>

此时没有任何问题

但是如果 $data 的值为 '{"text":"测试\n测试"}' 此时框架在解析这一行时就可能会把 \n 给转译成换行 那这时我们再看这个文件


<html>
<!-- h5 部分 略 -->
</html>
<script>
  // 略 
  const data = JSON.parse('{"text":"测试
测试"}')
  // 略   
</script>


发现问题了吗 这时在执行这个 h5 文件时 js就会报错

解决方案是使用正则将所有的 \n 替换成 \\n

<html>
<!-- h5 部分 略 -->
</html>
<script>
  // 略 
  const data = JSON.parse('{$data}'.replace(/\n/g,'\\n'))
  // 略   
</script>

此时我们再看这个文件


<html>
<!-- h5 部分 略 -->
</html>
<script>
  // 略 
  const data = JSON.parse('{"text":"测试\n测试"}')
  // 略   
</script>