时间戳

首页 > 解决方案 > 如何将此原始代码放入

正确标记？

javascript - 如何将此原始代码放入
正确标记？

问题描述

我试图让用户输入一些文本，然后我在它上面运行更漂亮，然后向用户显示格式化的代码。我的小提琴：

<pre id="mypre" style="background-color:grey"></pre>

var val = `"<!DOCTYPE html>\n
<html>
  \n
  <body>
    \n
    <h1>My First Heading</h1>
    \n
    <p>My first paragraph.</p>
    \n\n
  </body>
  \n
</html>
"`;


$(document).ready(function(){
  val = val.replace(/^"(.*)"$/, '$1');
  val = val.replace(/(?:\r\n|\r|\n)/g, '');
  $("#mypre").text(val);
});

请注意，返回的文本以文字返回"，我尝试替换它们和\n字符无济于事。我希望 pre 标签看起来像这样：

<!DOCTYPE html>
<html>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

标签： javascripthtmljqueryprettier

解决方案

是的，正则表达式很有趣。这应该有效：

var val = `"<!DOCTYPE html>\n
<html>
  \n
  <body>
    \n
    <h1>My First Heading</h1>
    \n
    <p>My first paragraph.</p>
    \n\n
  </body>
  \n
</html>
"`;


$(document).ready(function(){
  val = val.replace(/^"([\s\S]*?)"$/, '$1');
  val = val.replace(/\n{2,}/g, '');
  $("#mypre").text(val);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre id="mypre" style="background-color:grey"></pre>

第一个正则表达式([\s\S]*?)匹配多行的所有内容并\n{2,}匹配两个或多个\n换行符。

推荐阅读