我的经验是，直接把 HTML 单独写到一个浏览器能访问到的文件里，比如 template/foo.html。然后 JS 里发一个同步 XHR 请求去读这个文件，例如：
var html = Template.load('/template/foo.html')
var target = document.getElementById('xxx')
target.innerHTML = html
Template 是一个工具类，负责发送同步 XHR 请求并返回结果。
这样在开发的时候，模板文件和 JS 代码分离，非常好维护。
当然这样做的话，上线的时候总发 XHR 请求也不是办法。所以在打包 JS 之前，我一般会通过脚本把所有的 Template.load('.*') 提取出来，替换成对应 HTML 的内容。这样在开发时非常方便，上线时也没有性能问题。
比如上面的代码被打包工具跑一下就变成了：
var html = "\n...\n"// 引号里是 /template/foo.html 对引号、换行做了转义之后的内容，由工具自动生成
var target = document.getElementById('xxx')
target.innerHTML = html
你可以新建一个jsp页面，将html中<html></html>标签中的内容替换jsp页面中<html></html>内容即可。但注意jsp页面中的第一行：
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>改为：
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
这行意思是你用到了包和页面中显示的是中文。
import java.util.regex.Matcherimport java.util.regex.Pattern
/**
* <p>
* Title: HTML相关的正则表达式工具类
* </p>
* <p>
* Description: 包括过滤HTML标记，转换HTML标记，替换特定HTML标记
* </p>
* <p>
* Copyright: Copyright (c) 2006
* </p>
*
* @author hejian
* @version 1.0
* @createtime 2006-10-16
*/
public class HtmlRegexpUtil {
private final static String regxpForHtml = "<([^>]*)>"// 过滤所有以<开头以>结尾的标签
private final static String regxpForImgTag = "<\\s*img\\s+([^>]*)\\s*>"// 找出IMG标签
private final static String regxpForImaTagSrcAttrib = "src=\"([^\"]+)\""// 找出IMG标签的SRC属性
/**
*
*/
public HtmlRegexpUtil() {
// TODO Auto-generated constructor stub
}
/**
*
* 基本功能：替换标记以正常显示
* <p>
*
* @param input
* @return String
*/
public String replaceTag(String input) {
if (!hasSpecialChars(input)) {
return input
}
StringBuffer filtered = new StringBuffer(input.length())
char c
for (int i = 0i <= input.length() - 1i++) {
c = input.charAt(i)
switch (c) {
case '<':
filtered.append("<")
break
case '>':
filtered.append(">")
break
case '"':
filtered.append(""")
break
case '&':
filtered.append("&")
break
default:
filtered.append(c)
}
}
return (filtered.toString())
}
/**
*
* 基本功能：判断标记是否存在
* <p>
*
* @param input
* @return boolean
*/
public boolean hasSpecialChars(String input) {
boolean flag = false
if ((input != null) &&(input.length() >0)) {
char c
for (int i = 0i <= input.length() - 1i++) {
c = input.charAt(i)
switch (c) {
case '>':
flag = true
break
case '<':
flag = true
break
case '"':
flag = true
break
case '&':
flag = true
break
}
}
}
return flag
}
/**
*
* 基本功能：过滤所有以"<"开头以">"结尾的标签
* <p>
*
* @param str
* @return String
*/
public static String filterHtml(String str) {
Pattern pattern = Pattern.compile(regxpForHtml)
Matcher matcher = pattern.matcher(str)
StringBuffer sb = new StringBuffer()
boolean result1 = matcher.find()
while (result1) {
matcher.appendReplacement(sb, "")
result1 = matcher.find()
}
matcher.appendTail(sb)
return sb.toString()
}
/**
*
* 基本功能：过滤指定标签
* <p>
*
* @param str
* @param tag
*指定标签
* @return String
*/
public static String fiterHtmlTag(String str, String tag) {
String regxp = "<\\s*" + tag + "\\s+([^>]*)\\s*>"
Pattern pattern = Pattern.compile(regxp)
Matcher matcher = pattern.matcher(str)
StringBuffer sb = new StringBuffer()
boolean result1 = matcher.find()
while (result1) {
matcher.appendReplacement(sb, "")
result1 = matcher.find()
}
matcher.appendTail(sb)
return sb.toString()
}
/**
*
* 基本功能：替换指定的标签
* <p>
*
* @param str
* @param beforeTag
*要替换的标签
* @param tagAttrib
*要替换的标签属性值
* @param startTag
*新标签开始标记
* @param endTag
*新标签结束标记
* @return String
* @如：替换img标签的src属性值为[img]属性值[/img]
*/
public static String replaceHtmlTag(String str, String beforeTag,
String tagAttrib, String startTag, String endTag) {
String regxpForTag = "<\\s*" + beforeTag + "\\s+([^>]*)\\s*>"
String regxpForTagAttrib = tagAttrib + "=\"([^\"]+)\""
Pattern patternForTag = Pattern.compile(regxpForTag)
Pattern patternForAttrib = Pattern.compile(regxpForTagAttrib)
Matcher matcherForTag = patternForTag.matcher(str)
StringBuffer sb = new StringBuffer()
boolean result = matcherForTag.find()
while (result) {
StringBuffer sbreplace = new StringBuffer()
Matcher matcherForAttrib = patternForAttrib.matcher(matcherForTag
.group(1))
if (matcherForAttrib.find()) {
matcherForAttrib.appendReplacement(sbreplace, startTag
+ matcherForAttrib.group(1) + endTag)
}
matcherForTag.appendReplacement(sb, sbreplace.toString())
result = matcherForTag.find()
}
matcherForTag.appendTail(sb)
return sb.toString()
}
}
