StringBuilder拼接html非常简便的方法

虽然没啥使用价值,但是对于刚学习的萌新来说,还是有点用处的,毕竟都是这么一步步过来的!

灵感来源

有时候,我们会将html代码转换成java中的字符串,但是,工具只会帮我们用String拼接的方法来进行操作,由于String是不可变长的字符串。这样一旦html代码比较多的话,效率会非常非常低,所以我想到用StringBuilder进行拼接,但是,这又出现了一个难点,这么多+号,要是一个一个手动更改的话,那估计得累死。然后想到了那个ctrl+f的一键替换的功能,但是,该怎么替换呢?请看下面的步骤。

操作步骤

1.html代码示例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>展示联系人页面</title>
		<style type="text/css">
			img {
				width: 30px;
				height: 30px;
			}
			
			#title {
				text-align: center;
				/*控制div的字体大小*/
				font-size: 30px;
				/*控制文本和边框之间的距离*/
				padding: 15px;
			}
			/*使光标放在超连接上变红*/
			
			a:hover {
				color: red;
			}
			
			a {
				color: blue;
			}
			
			form {
				text-align: center;
				font-family: 微软雅黑;
				font-size: 18px;
			}
			
			thead {
				color: white;
			}
		</style>
	</head>

	<body>
		<div id="title">展示所有联系人</div>
		<hr />
		<form action="" method="post">
			<div style=" text-align: center;">
				<div style="width: 48%;margin: auto;position:relative">
					<tr>
						<td>
							<a href="addPerson.html" style="position: relative;top: 0px;right: 170px;">
								<img src="img/add.png" />
							</a>
						</td>
						<td>
							<input type="search" style="position: relative;top: -5px;right: -166px;" />
						</td>
						<td>
							<input type="button" value="搜索" style="position: relative;top: -5px;right: -170px;" />
						</td>
					</tr>
				</div>
				<table border="1" cellspacing="1" cellpadding="3" style="margin: auto; width: 35%;">
					<thead bgcolor="aquamarine">
						<tr>
							<th>
								<input type="button" value="删除选中" />
							</th>
							<th>&emsp;</th>
							<th>ID</th>
							<th>USERNAME</th>
							<th>AGE</th>
							<th>PHONE</th>
							<th>ADDRESS</th>
							<th>删除</th>
							<th>修改</th>
						</tr>
					</thead>
					<tbody>
						这里面循环
					</tbody>
				</table>
			</div>
		</form>
	</body>

</html>

2.java代码示例

//第一步,当然是创建一个StringBuilder对象
StringBuilder sb = new StringBuilder("<!DOCTYPE html>\r\n");
/*
 * 第二步,定义一个String html = "";然后将html直接复制在""双引号中,mye会自动转换成字符串拼接形式
 * 如果不行的话,可以在将代码复制在oracle数据库中,选中右键,选择复制的格式为java,然后就行了,这里不多说
 * 第三步,ctrl+f,将+号全部替换成 ).append( 这样就可以了。然后稍微去头加尾就行了,效果如下:
 */
		String html = sb.append( 
				"<html>\r\n" ).append( 
				"\r\n" ).append( 
				"	<head>\r\n" ).append( 
				"		<meta charset=\"utf-8\" />\r\n" ).append( 
				"		<title>展示联系人页面</title>\r\n" ).append( 
				"		<style type=\"text/css\">\r\n" ).append( 
				"			img {\r\n" ).append( 
				"				width: 30px;\r\n" ).append( 
				"				height: 30px;\r\n" ).append( 
				"			}\r\n" ).append( 
				"			\r\n" ).append( 
				"			#title {\r\n" ).append( 
				"				text-align: center;\r\n" ).append( 
				"				/*控制div的字体大小*/\r\n" ).append( 
				"				font-size: 30px;\r\n" ).append( 
				"				/*控制文本和边框之间的距离*/\r\n" ).append( 
				"				padding: 15px;\r\n" ).append( 
				"			}\r\n" ).append( 
				"			/*使光标放在超连接上变红*/\r\n" ).append( 
				"			\r\n" ).append( 
				"			a:hover {\r\n" ).append( 
				"				color: red;\r\n" ).append( 
				"			}\r\n" ).append( 
				"			\r\n" ).append( 
				"			a {\r\n" ).append( 
				"				color: blue;\r\n" ).append( 
				"			}\r\n" ).append( 
				"			\r\n" ).append( 
				"			form {\r\n" ).append( 
				"				text-align: center;\r\n" ).append( 
				"				font-family: 微软雅黑;\r\n" ).append( 
				"				font-size: 18px;\r\n" ).append( 
				"			}\r\n" ).append( 
				"			\r\n" ).append( 
				"			thead {\r\n" ).append( 
				"				color: white;\r\n" ).append( 
				"			}\r\n" ).append( 
				"		</style>\r\n" ).append( 
				"	</head>\r\n" ).append( 
				"\r\n" ).append( 
				"	<body>\r\n" ).append( 
				"		<div id=\"title\">展示所有联系人</div>\r\n" ).append( 
				"		<hr />\r\n" ).append( 
				"		<form action=\"\" method=\"post\">\r\n" ).append( 
				"			<div style=\" text-align: center;\">\r\n" ).append( 
				"				<div style=\"width: 48%;margin: auto;position:relative\">\r\n" ).append( 
				"					<tr>\r\n" ).append( 
				"						<td>\r\n" ).append( 
				"							<a href=\"addPerson.html\" style=\"position: relative;top: 0px;right: 170px;\">\r\n" ).append( 
				"								<img src=\"img/add.png\" />\r\n" ).append( 
				"							</a>\r\n" ).append( 
				"						</td>\r\n" ).append( 
				"						<td>\r\n" ).append( 
				"							<input type=\"search\" style=\"position: relative;top: -5px;right: -166px;\" />\r\n" ).append( 
				"						</td>\r\n" ).append( 
				"						<td>\r\n" ).append( 
				"							<input type=\"button\" value=\"搜索\" style=\"position: relative;top: -5px;right: -170px;\" />\r\n" ).append( 
				"						</td>\r\n" ).append( 
				"					</tr>\r\n" ).append( 
				"				</div>\r\n" ).append( 
				"				<table border=\"1\" cellspacing=\"1\" cellpadding=\"3\" style=\"margin: auto; width: 35%;\">\r\n" ).append( 
				"					<thead bgcolor=\"aquamarine\">\r\n" ).append( 
				"						<tr>\r\n" ).append( 
				"							<th>\r\n" ).append( 
				"								<input type=\"button\" value=\"删除选中\" />\r\n" ).append( 
				"							</th>\r\n" ).append( 
				"							<th>&emsp;</th>\r\n" ).append( 
				"							<th>ID</th>\r\n" ).append( 
				"							<th>USERNAME</th>\r\n" ).append( 
				"							<th>AGE</th>\r\n" ).append( 
				"							<th>PHONE</th>\r\n" ).append( 
				"							<th>ADDRESS</th>\r\n" ).append( 
				"							<th>删除</th>\r\n" ).append( 
				"							<th>修改</th>\r\n" ).append( 
				"						</tr>\r\n" ).append( 
				"					</thead>\r\n" ).append( 
				"					<tbody>\r\n" ).append( 
				"						这里面循环\r\n" ).append( 
				"					</tbody>\r\n" ).append( 
				"				</table>\r\n" ).append( 
				"			</div>\r\n" ).append( 
				"		</form>\r\n" ).append( 
				"	</body>\r\n" ).append( 
				"\r\n" ).append( 
				"</html>").toString();

这样就操作完了,是不是很方便呢 ~~