代码格式转换小工具

最新推荐文章于 2024-08-07 10:12:20 发布

Blancker

最新推荐文章于 2024-08-07 10:12:20 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签：小工具

本文链接：https://blog.youkuaiyun.com/Blancker/article/details/86151355

本文介绍了一款实用的代码格式转换工具，该工具提供两种功能：一是将尖括号转换为HTML转义符格式，二是将双引号转换为单引号格式。通过简单的按钮点击操作，用户可以轻松地对输入的代码进行转换，并实时查看转换后的结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本工具包含两个模块，将尖括号转换为转义符格式以及将双引号转换为单引号格式。

主要逻辑代码：

尖括号转换为转义符

function html2Escape(sHtml){
	return sHtml.replace(/[<>&]/g,function(c){
		return {
			'<':'&lt;',
			'>':'&gt;',
			'&':'&amp;'
		}[c];
	});
}

双引号转换为单引号

function html2Quotation(sHtml){
	return sHtml.replace(/"/g,"'");
}

源文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Style Change</title>
		<style type="text/css">
			body,h1,h2,div,input,p{
				margin: 0px;
				padding: 0px;
			}
			body{
				background-color: lightgreen;
				overflow: hidden;
			}
			#header{
				display: flex;
			}
			h1{
				width: 60vw;
				text-align: center;
			}
			#change{
				margin: auto;
				width: 1328px;
				border: 3px solid black;
				display: flex;
			}
			#input,#output{
				background: white;
				margin: 14px;
				width: 636px;
				height: 518px;
				overflow: auto;
			}
			input{
				margin: 6px;
				width: 165px;
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<h1>代码格式转换</h1>
			<input type="button" value="将'<>'转换为转义符格式" onclick="change(html2Escape)" />
			<input type="button" value="将双引号转换为单引号 " onclick="change(html2Quotation)" />
		</div>
		<div id="change">
			<div id="old">
				<h2>请输入要转换的代码:</h2>
				<pre id="input" contenteditable="true"></pre>
			</div>
			<div id="new">
				<h2>转换后代码:</h2>
				<pre id="output"></pre>
			</div>
		</div>
		<script type="text/javascript">
			var but1 = document.getElementById("but1");
			var but2 = document.getElementById("but2");
			var inp = document.getElementById("input");
			var outp = document.getElementById("output");
			
			//将尖括号转换为转义符
			function html2Escape(sHtml){
				return sHtml.replace(/[<>&]/g,function(c){
					return {
						'<':'&lt;',
						'>':'&gt;',
						'&':'&amp;'
					}[c];
				});
			}
			
			//将双引号转换为单引号
			function html2Quotation(sHtml){
				return sHtml.replace(/"/g,"'");
			}
			
			function change(fn){
				var textin = inp.innerHTML;
				//同步文本格式
				var textout1 = textin.replace(/<div><br><.div>/g,"\n");
				var textout2 = textout1.replace(/<div>/g,"\n");
				var textout3 = textout2.replace(/<br>/g,"");
				var textout4 = textout3.replace(/<.div>/g,"");
				
				outp.innerHTML = fn(textout4);
			}
			
		</script>
	</body>
</html>