javascript - 如何正确地将这个原始代码放入 <pre> 标记中?

标签 javascript html jquery prettier

我试图让用户输入一些文本,然后我对其运行 prettier,然后向用户显示格式化的代码。 My fiddle :

<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>

最佳答案

是的,正则表达式很有趣。这应该有效:

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 换行符。

关于javascript - 如何正确地将这个原始代码放入 <pre> 标记中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61604731/

相关文章:

javascript - 浏览器中的mp3流解码

javascript - 为什么 ReactCSSTransitionGroup 会生成多个组件,而我只希望生成一个组件?

php - 使用 Jquery/Javascript 查找多个 PHP 生成的输入

html - Firefox/Chrome 与滚动条的对齐差异

html - 如何使用 Bootstrap 4 创建固定侧边栏布局?

jquery - $(document).ready() 在 f :ajax rendering 之后不运行

javascript - jquery 显示隐藏

javascript - CKEditor autogrow插件垂直滚动条闪烁问题

php - Ajax 变量值到 javascript

html - 如何在 div 中将 3 列向左对齐?