1

Estou criando um servidor com Express em Node.js onde cada página HTML é diferente mas possui o mesmo código JavaScript no <head> do documento.

O que eu quero fazer é escrever esse código JavaScript uma única vez para injetá-lo em todos os meus arquivos HTML sem que eu precise alterar alguma coisa no meu servidor.

Eu gostaria de fazer algo como isto:

app.get("/", (request, response) => {
    const filename = path.resolve("templates/index.html");
    const jsCode = getDefaultCode();

    const content inject(filename, jsCode);

    response.send(content);
});

Resultado:

<!doctype html>
<html>
    <head>
        <title>Meu arquivo HTML</title>
        <meta charset="UTF-8">
        <script>
            // Código injetado.
        </script>
    </head>
    <body>...</body>
</html>

Eu sei que existe um pacote chamado handlebars, mas ele parece ser bastante complexo e eu gostaria de algo bem simples apenas para injetar meu código JavaScript nos arquivos HTML.

1
  • 1) Você pode usar regex para buscar um termo <title>, por exemplo, e adicionar o código após o termo; 2) Você pode usar template engine como haml, ejs, vuexpress etc. 10/04/2020 às 17:36

1 Resposta 1

1

Conforme colocado nos comentários, você pode usar expressões regulares para isso.

Você também pode, por exemplo, editar o seu arquivo e incluir algum "comentário especial", que usaremos para repor pelo script a ser injetado. Algo assim:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, world!</title>
    <meta charset="UTF-8" />
    <!-- inject::script -->
  </head>
  <body>
    Hello, world!
  </body>
</html>

Pode então criar uma função para encapsular esse comportamento:

function injectScript(file, script) {
  return file.replace('<!-- inject::script -->', `<script>${script}</script>`);
}

E basta passar o conteúdo do arquivo:

const { promises: fs } = require('fs');
const path = require('path');
const app = require('express')();

const filePath = path.join(__dirname, 'template.html');

const script = `
  window.addEventListener('load', () => {
    document.body.style.color = 'rgb(255, 0, 0)';
  });
`;

function injectScript(file, script) {
  return file.replace('<!-- inject::script -->', `<script>${script}</script>`);
}

app.get('/', async (req, res) => {
  try {
    // Obter o HTML:
    const file = await fs.readFile(filePath, 'utf8');

    // Injetar o script:
    const injected = injectScript(file, script);

    // Enviar o HTML com o script injetado:
    res.send(injected);
  } catch (error) {
    res.send(`Whoops. Erro: ${error.message}.`);
  }
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening at port ${port}.`));

Veja funcionando no CodeSandbox.

Note que se você não puder editar os templates para adicionar o comentário, basta utilizar alguma tag que sempre estará no <head> como ponto de referência ao invés do comentário. Na minha opinião, </head> é o mais simples de ser utilizado nesse caso.

Assim:

function injectScript(file, script) {
  return file.replace('</head>', `<script>${script}</script></head>`);
}

Note no exemplo acima que trocamos </head> por uma tag de script e o fechamento da </head> logo em seguida.

Você pode também usar as chamadas template engines, que te ajudam a fazer isso com mais facilidade. Nunjucks é a mais simples na minha opinião, com uma sintaxe inspirada da template engine jinja2 do Python.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .