Question

我正在一个项目中，我有一个由node.js托管的简单Web服务器（请参见下面的代码），并且我希望能够动态加载代码表单html文件并在每次有人创建一个html文件时对其进行修改。请求。我已经在代码${likeThis}中放置了一些标记，我只需要代码将字符串放置在正确的位置即可。

这是我的服务器代码：

const express = require('express');
const app = express();

app.get('/', function (req, res) {
  res.send('Hello World');
})

app.listen(8080);
});

这是一个示例页面，在其中我想用纯文本“ hello world !!!”更改值${sampleText}：

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>Titler</title>
</head>
<body>
${sampleText}
</body>

请注意，整个html页面上可能会有更多相同或不同类型的值。

在用户方面，我希望这样：

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>Titler</title>
</head>
<body>
Hello world!!!
</body>

Answer 1

有几种方法可以在Express返回的页面中使用实时数据。所有这些都利用了您向其中注入“数据”的“模板”。这些包括：

另一种选择是使用NodeJS / ES6模板字符串，例如：

const express = require('express')
const app = express()

// Text to insert into template
const sampleText = 'hello world!!!'

// Template to accept sampleText
const result = `<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Titler</title>
</head>
<body>
  ${sampleText}
</body>
</html>
`

app.get('/', function (req, res) {
  res.send(result);
})

app.listen(8080);

反引号（“`”）用于在Node中定义模板字符串，其中“ $ {expression}”用于将任何可评估的JavaScript表达式插入模板，例如：

const result = `The contents of file ${filepath} are: ${fs.readFileSync(filepath).toString()}`

有关更多信息，请参见Using Template Engines with Express 有关使用Express可以“开箱即用”运行的模板引擎的详尽列表，请参见Template Engines

Answer 2

我将用Mustache进行说明，您需要Webpack才能在前端和Web服务器之间进行通信，但是由于webpack令人头疼，因此我将使用髭CDN。

index.html

<!DOCTYPE html>
<html lang="en">
<head>

  <title>Document</title>
</head>
<body>
<div id="message"></div>
//we are gonna render the message into this div tag.
//this is a javascript code


//make sure script tags are at the bottom
<script id="message-template" type="text/html">
      <div class="message">
          {{message}} . //yes double curly brackets
      </div>  
    </script>
   //CDN link, Mustache pack files are stored here and we import from there
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
 //for src add path of index.js in your app
<script src="./index.js"></script>

</body>
</html>

index.js

//select the div that you wanna place the message
const $message = document.querySelector("#messages");

//select the script tag in 
const messageTemplate = document.querySelector("#message-template").innerHTML;


const html = Mustache.render(messageTemplate, {
    //I hardcoded the message here, but as you learn, you will catch a dynamic data, put it here and display in your html page
    message:"hello world",
  });
  $message.innerHTML(html);

Answer 3

经过一番工作（实际上非常喜欢），我使该功能能够使我找到字符串并用正确的文本替换它们，我将发布它，希望将来其他人需要它：

function substituteString(input, stringToChange, substitute) {
    var n = 0;
    while (true) {
        n = input.indexOf(stringToChange, n);
        if (n == -1) { break; } else {
            input = input.replace(stringToChange ,substitute);
        }
    }
    return input;
}

比我想的要容易

使用节点js

3 个答案: