Как получить часть переменной в JavaScript? - PullRequest
Новая
       2

Как получить часть переменной в JavaScript?

1 голос
/ 03 октября 2019

В моей функции у меня есть следующая переменная (его содержимое является 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, мне просто нужно найти способ получить часть его содержимого правильно? Я просто пока не понимаю ...

Заранее спасибо!

Ответы [ 3 ]

0 голосов
/ 03 октября 2019

Лучше всего разобрать его как 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

0 голосов
/ 03 октября 2019

Вам нужно преобразовать переменную строку, чтобы сократить ее до HTML, и после этого сделать выбор div: 

var yourPage= $.parseHTML(pageString);
var myScreenDiv= $(yourPage).find("#myScreen");
console.log(myScreenDiv.outerHTML);
0 голосов
/ 03 октября 2019

HTML-код, который вы показали, недействителен. Я исправил это.

Является ли outerHTML, может быть, то, что вы ищете? 

console.log(myScreen.outerHTML);
<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</button></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...