javascript - 如何在 Spring Boot 中解析 html 内容
问题描述
我有一个项目，允许用户将 html 内容发布到端点。该程序应该处理 html 内容并在服务器上创建一个新的 html 文件。客户端构造一个 html 字符串，然后将其发布到端点。端点调用写入文件的服务方法。
预期：客户端将 html 字符串发布到端点 ``。该服务处理来自正文的 html 内容。然后使用 html 内容创建一个 html 文件
实际：客户端将 html 字符串发布到端点wordmatch。该服务处理来自正文的 html 内容。然后用 html 内容创建一个 html 文件，但是复制字符串部分时出错
</div><span style="padding: 3px"> <button id ="one" class="button" type="button" onClick="show_answer(">Show Answer</button> <button id = "resetButton" class="button" type="button" onClick="reset(">Reset</button></span>
生成的 html 字符串是这样创建的
// initialize blank html
header = '<!DOCTYPE HTML>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Word Matching Exercise</title>\n\t\t<style>\n*:focus {outline: 2px solid blue; outline-offset: 2px;}\n\t\tdetails {padding:3px;}\n\t\t</style>\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"${pageContext.request.contextPath}/static/css/boxes.css\" />\n\t\t<script type=\"text/javascript\" src=\"${pageContext.request.contextPath}/static/js/event1.js\">';
header += "<link rel=\"stylesheet\" type=\"text/css\" href=\"${pageContext.request.contextPath}/static/css/style.css\" />"
header += '</'
header += 'script>\n'
header += '<script async src=\"https://www.googletagmanager.com/gtag/js?id=UA-89940905-27\">'
// header += '</'
// header += 'script>\n<script>\n\t window.dataLayer = window.dataLayer || [];\n\t function gtag(){dataLayer.push(arguments)};\tgtag(\"js\", new Date());\tgtag(\"config\", \"UA-89940905-27\");\n'
header += '</'
header += 'script>\n'
header += '<script src="${pageContext.request.contextPath}/static/js/jquery-1.7.2.min.js">'
header += '</'
header += 'script>\n'
header += '<script src="${pageContext.request.contextPath}/static/js/jquery-ui.min.js">'
header += '</'
header += 'script>\n'
header += '<script src="${pageContext.request.contextPath}/static/js/jquery.ui.touch-punch.min.js">'
header += '</'
header += 'script>\n'
header += '<script src="${pageContext.request.contextPath}/static/js/event1.js">'
header += '</'
header += 'script>\n'
header += '<script src="${pageContext.request.contextPath}/static/js/jquery.alerts.js">'
header += '</'
header += 'script>\n'
header += '<link href="${pageContext.request.contextPath}/static/js/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen">'
header += '<script type=\"text/javascript\" src=\"${pageContext.request.contextPath}/static/js/logging.js\">'
header += '</'
header += 'script>\n</head>\n\t\t<body>';
let html = '';
html += header;
html += '<div id=\'maincontentstyle\'>\n'
html += '\t<center>\n'
html += '\t\t<div id=\'boxstyle\'>\n'
html += '\t\t\t<h3 id=\'title\'>'+title+"</h3>\n";
//create key inputs
html += '\t\t\t\t<center>\n'
html += '\t\t\t\t\t<div class=\'source\'>\n'
for (let i = numberOfInputs; i < elArray.length+numberOfInputs; i++){
html += '\t\t\t\t\t\t<div id=\'s';
id = (1+i-numberOfInputs);
html += id;
html +='\' class=\'draggyBox-small ui-draggable\'>\n';
html += '\t\t\t\t\t\t\t'
html += elArray[i-numberOfInputs]
html += '\n';
html +='\t\t\t\t\t\t</div>\n';
}
html += '\t\t\t\t\t</div>\n'
html += '\t\t\t\t\t</center>\n'
//create description inputs
html += '\t\t\t\t\t<table id=\'tablestyle\'>\n'
console.log(dlArray)
dlArray = shuffle(dlArray);
console.log(dlArray)
for (let i = numberOfInputs; i < dlArray.length+numberOfInputs; i++){
html +='\t\t\t\t\t\t<tr>\n'
html += '\t\t\t\t\t\t<td id=\'row';
id = (1+i-numberOfInputs);
html += id;
html +='\'>\n';
html += '\t\t\t\t\t\t\t<div id=\'t';
html += id;
html +='\' class=\'ltarget\'>'
html +='</div>\n'
html +='\t\t\t\t\t\t</td >\n'
html +='\t\t\t\t\t\t<td id=\'d'
html += id
html += '\'>\n'
html += '\t\t\t\t\t\t\t';
html += dlArray[i-numberOfInputs];
html += '\n';
html +='\t\t\t\t\t\t\t</td >\n'
html +='\t\t\t\t\t\t</tr>\n';
}
html += '\t\t\t\t\t</table>\n';
html += '\t\t\t\t</center>\n'
html += '\t\t</div>\n'
html += '\t</center>\n'
html += '</div>'
html += '<span style=\"padding: 3px\"> <button id =\"one\" class=\"button\" type=\"button\" onClick=\"show_answer'
html += '()'
html += '"'
html += ">"
html += 'Show Answer'
html += '</'
html += 'button> <button id = \"resetButton\" class=\"button\" type=\"button\" onClick=\"reset'
html += '()'
html += '"'
html += '>'
html += 'Reset'
html += '</'
html += 'button>'
html += '</span>'
footer = '\n\t\t</body>\n</html>\n';
footer += '<script type=\"text/javascript\" src=\"${pageContext.request.contextPath}/static/js/word_match.js\">'
footer += '</'
footer += 'script>'
footer += '<script type=\"text/javascript\" src=\"${pageContext.request.contextPath}/static/js/GetElementPosition3.js\">'
footer += '</'
footer += 'script>'
footer += '<script type=\"text/javascript\" src=\"${pageContext.request.contextPath}/static/js/jquery.ui.touch-punch.min.js\">'
footer += '</'
footer += 'script>'
footer += '<script>audioOn = false; $(function() {$(\'.menulink\').click(function(){if (audioOn) {$("#bg").attr(\'src\',\"${pageContext.request.contextPath}/static/images/audioOff.png\"); audioOn = false;}else {$(\"#bg\").attr(\'src\',"${pageContext.request.contextPath}/static/images/audioOn.png");audioOn = true; speak(" ");}return false;});});'
footer += '</'
footer += 'script>'
footer += '<img id=\"bg\" src=\"${pageContext.request.contextPath}/static/images/audioOff.png\" height=\"30\" width=\"30\" style=\"margin-bottom:-10px; padding-bottom:-20px;\">'
html += footer;
服务器接收字符串为
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Word Matching Exercise</title>
<style>
*:focus {outline: 2px solid blue; outline-offset: 2px;}
details {padding:3px;}
</style>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/boxes.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/event1.js"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/style.css" /></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-89940905-27"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-1.7.2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-ui.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.ui.touch-punch.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/event1.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.alerts.js"></script>
<link href="${pageContext.request.contextPath}/static/js/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen"><script type="text/javascript" src="${pageContext.request.contextPath}/static/js/logging.js"></script>
</head>
<body><div id='maincontentstyle'>
<center>
<div id='boxstyle'>
<h3 id='title'>title</h3>
<center>
<div class='source'>
<div id='s1' class='draggyBox-small ui-draggable'>
k1
</div>
<div id='s2' class='draggyBox-small ui-draggable'>
k2
</div>
</div>
</center>
<table id='tablestyle'>
<tr>
<td id='row1'>
<div id='t1' class='ltarget'></div>
</td >
<td id='d1'>
d2
</td >
</tr>
<tr>
<td id='row2'>
<div id='t2' class='ltarget'></div>
</td >
<td id='d2'>
d1
</td >
</tr>
</table>
</center>
</div>
</center>
</div><span style="padding: 3px"> <button id ="one" class="button" type="button" onClick="show_answer(">Show Answer</button> <button id = "resetButton" class="button" type="button" onClick="reset(">Reset</button></span>
</body>
</html>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/word_match.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/static/js/GetElementPosition3.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.ui.touch-punch.min.js"></script><img id="bg" src="${pageContext.request.contextPath}/static/images/audioOff.png" height="30" width="30" style="margin-bottom:-10px; padding-bottom:-20px;">
问题在onClick="show_answer(">Show Answer. 由于某种原因，括号被切断了。数据模型是
import lombok.Data;
@Data
public class WordMatch {
public String content;
}
我不确定为什么字符串会丢失另一个括号。代码位于https://github.com/EvanGertis/Selected-Topics.git。该命令mvn spring-boot:run应该启动项目。对此问题的任何帮助将不胜感激。