在我的函数中，我有以下变量（它的内容是一个 html 代码）：
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/app.css"></link>
<title>App Android</title>
</head>
<form action="#" class="formulario" name="formulario">
<style>
.campo-texto {
color: #7B7D7D;
height: 30px;
position: absolute;
padding: 0px 5px 0px 5px;
border-style: ridge;
resize: horizontal;
overflow-x: hidden;
overflow-y: hidden;
background-color: white;
text-align: left;
border-radius: 6px;
}
.campo-botao {
position: absolute;
height: 28px;
width: 80px;
border: 2px solid rgba(0, 0, 0, 0.3);
text-align: center;
border-radius: 6px;
box-shadow: 2px 2px 2px #888;
overflow: hidden;
}
.campo-prompt {
position: absolute;
min-height: 20px;
display: inline-block;
padding: 0px 5px 0px 5px;
border: 1px dotted black;
border-radius: 6px;
}
.a9-screen-dimension {
position: relative;
margin: 0px;
width: 340px;
height: 540px;
border: 1px solid black;
background-color: #CED7E5;
overflow: hidden;
}
</style>
<body>
<div id="myScreen" class="a9-screen-dimension" tabindex="0">
<div id="promptId0" class="campo-prompt" draggable="true" style="top:68.625px; left:65.84375px;" tabindex="0">Prompt</div><button id="botaoId1" class="campo-botao" draggable="true" style="top:235.625px; left:77.84375px;" tabindex="0" myselection="salvar">Salvar</div></div>
</div>
</form>
<script>
function send(toast) {
var cod = formulario.cod.value;
Android.sendDataToAndroid(cod);
}
</script>
</body>
</html>
现在，我只需要获得以下部分：
<div id="myScreen" class="a9-screen-dimension" tabindex="0">
<div id="promptId0" class="campo-prompt" draggable="true" style="top:68.625px; left:65.84375px;" tabindex="0">Prompt</div><button id="botaoId1" class="campo-botao" draggable="true" style="top:235.625px;left:77.84375px;" tabindex="0" myselection="salvar">Salvar</div>
</div>
</div>
我已经尝试了以下方法，但所有这些都给了我错误：“......不是函数......”。
reader = reader.substr(reader.indexOf('<div id=\"myScreen\"'), reader.length() - 132);
reader = reader.substr(reader.indexOf('<div id=\"myScreen\"'), reader.indexOf('</form>'));
div myScreen 里面的内容是动态生成的，所以它可能比示例更大或更小。
我正在从 .html 文件中读取此内容。
这是我的功能：
$("#openProject").on("click", function openProject()
{
$("#inputAbrir").trigger('click');
inputAbrir.addEventListener('change', function(e) {
var file = inputAbrir.files[0];
if (file.name.match(/\.(html)$/)) {
var reader = new FileReader();
reader.onload = function() {
console.log(reader.result);
};
reader.readAsText(file);
}
else {
alert("Just .HTML files are supported!");
}
});
});
也许我错了，但我认为，既然我已经有了 var 的内容，我只需要找到一种方法来获取它的一部分内容，对吗？只是我还没弄明白...
提前致谢！
最好的办法是将其解析为 HTML，然后就可以使用 DOM 方法来读取和操作它：
// mock reader
const reader = {};
reader.result = getHTML();
const parser = new DOMParser();
const domobj = parser.parseFromString(reader.result, "text/html");
const myScreenHTML = domobj.querySelector("#myScreen").outerHTML;
console.log(myScreenHTML);
const expression = /(<div id="myScreen"[\s\S]*?<\/div>\s*<\/form>)/im;
console.log(expression.exec(reader.result)[1]);
function getHTML() {
return `<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/app.css"></link>
<title>App Android</title>
</head>
<form action="#" class="formulario" name="formulario">
<style>
.campo-texto {
color: #7B7D7D;
height: 30px;
position: absolute;
padding: 0px 5px 0px 5px;
border-style: ridge;
resize: horizontal;
overflow-x: hidden;
overflow-y: hidden;
background-color: white;
text-align: left;
border-radius: 6px;
}
.campo-botao {
position: absolute;
height: 28px;
width: 80px;
border: 2px solid rgba(0, 0, 0, 0.3);
text-align: center;
border-radius: 6px;
box-shadow: 2px 2px 2px #888;
overflow: hidden;
}
.campo-prompt {
position: absolute;
min-height: 20px;
display: inline-block;
padding: 0px 5px 0px 5px;
border: 1px dotted black;
border-radius: 6px;
}
.a9-screen-dimension {
position: relative;
margin: 0px;
width: 340px;
height: 540px;
border: 1px solid black;
background-color: #CED7E5;
overflow: hidden;
}
</style>
<body>
<div id="myScreen" class="a9-screen-dimension" tabindex="0">
<div id="promptId0" class="campo-prompt" draggable="true" style="top:68.625px; left:65.84375px;" tabindex="0">Prompt</div><button id="botaoId1" class="campo-botao" draggable="true" style="top:235.625px; left:77.84375px;" tabindex="0" myselection="salvar">Salvar</div></div>
</div>
</form>
<${"script"}>
function send(toast) {
var cod = formulario.cod.value;
Android.sendDataToAndroid(cod);
}
</${"script"}>
</body>
</html>`;
}您也可以使用正则表达式。既然你坚持了，下面是方法：
const expression = /(<div id="myScreen"[\s\S]*?<\/div>\s*<\/form>)/im;
console.log(expression.exec(reader.result)[1]);
这是正则表达式的小提琴：https : //regex101.com/r/jwyCPh/1
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句