如何将这段原始代码正确地放置在
标签中？

11 浏览
0 Comments

如何将这段原始代码正确地放置在
标签中？

我试图让用户输入一些文本，然后在该文本上运行prettier，然后向用户显示格式化的代码。我的fiddle链接：点击这里：



var val = `"\n

  \n
  
    \n


My First Heading


    \n
    My first paragraph.
    \n\n
  
  \n

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


请注意，返回的文本带有字面上的"字符，我已尝试替换它们和\n字符，但无济于事。我希望pre标签的显示如下所示：






  
    
My First Heading

    My first paragraph.
  





															

							

															

						

						
0

					

				


			


			
			

	

		

			

				1
				答案			


					


		
		

			
				
											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
问题的原因是将原始代码放入


标签中时出现了格式混乱的情况。解决方法是使用正则表达式将代码进行处理，然后将处理后的代码放入
标签中显示。
首先，我们将原始代码存储在一个变量中：
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>
"`;





接下来，我们使用正则表达式处理代码，并将处理后的代码赋值给val变量：




val = val.replace(/^"([\s\S]*?)"$/, '$1');
val = val.replace(/\n{2,}/g, '');





然后，我们使用jQuery将处理后的代码放入


标签中进行显示：
$(document).ready(function(){
  $("#mypre").text(val);
});





最后，我们需要在HTML文件中引入jQuery库，并添加


标签：






其中，第一个正则表达式`([\s\S]*?)`匹配多行代码，而`\n{2,}`匹配两个或更多的换行符。


为什么`\n{2,}`会匹配换行符以及`\n`字符？这可能会让人困惑。`\n`表示换行，在Linux系统中至少是这样的。由于代码中没有看到`\r\n`（Windows系统）的换行符，所以我假设`\n`足够了。当然，为了更加安全，你当然可以匹配`(\r\n|\r|\n)`后跟`{2,}`，即`(\r\n|\r|\n){2,}`，以覆盖所有可能性。


如果你对`{2,}`感到困惑：它表示匹配前面表达式的两个或更多个。在这种情况下，前面的表达式是我们的换行符，所以"匹配两个或更多个换行符"。一个换行符只是一个新行，我们希望保留它，但是两个连续的换行符表示一个空行，我想你是想要删除它，对吗？


希望这些解释对你有帮助！

									

				

									

			

			
0