如何在 Node.js 中更改或编辑 Html答案

【问题标题】：How to change or edit Html in Node.js如何在 Node.js 中更改或编辑 Html
【发布时间】：2020-05-19 12:18:10
【问题描述】：

我需要在 Node.js 中更改 html。

1 我必须从日期中心读取日期

2 我必须在 NODE 中更改或添加 html 代码

实际上我需要读取日期并将其写入 html 文件

有 javascript 代码我指出我必须更改 html

var mysql = require("mysql");
var connection = mysql.createConnection({
 host: 'localhost',
 user: 'testuser',
 password: 'a',
 database: 'test',
 port: 3306
});




connection.connect();

 var read = connection.query("SELECT `Name` FROM `fruids`",function(error, result){
  if(error) throw error;
  console.log(result);
 });

 //~~~~~here i have to change inner

 connection.end();

这是下面的html

<html>
<head>
    <title>Регистрация</title>
    <meta charset="utf-8" />
    <style>
    p{
      text-align: right;
      margin-right: 252px;
      margin-top: -8px;
    }
    </style>
</head>
<body>
    <h1>Введите данные</h1>
    <form action="/register" method="post">
        <label>Имя</label><br>
        <input type="text" name="userName" /><br><br>
        <label>Email</label><br>
        <input type="text" name="userAge" /><br><br>
        <label>Повідомлення</label><br>
        <textarea type="text" name="userMess" ></textarea><br><br>

        <input type="submit" value="OK" />
        <input type="reset" value="Стерти" />

    </form>
    <form>
      <h1 style="text-align: right;
                  margin-top: -284px;
                  margin-right: 170px;
      ">Повідомлення</h1>
    <p class="inner" id="mesager">xss</p>
    </form>
     </body>
</html>

我可以这样做吗

var date;
var node;
node.nodeValue = node.nodeValue.replace(/lol/, "<span>"+date+"</span>")

【问题讨论】：

你应该分享你的代码的更多细节。通过 Node.js 更改 HTML 的信息太少了。
有很多方法可以满足您的要求。您可以使用 DOM 解析器来解析 HTML，然后编辑其内容。您可以只使用搜索和替换/正则表达式并替换一个值。如果不了解您正在尝试的更多信息，就很难告诉您如何继续。
当我尝试使用 DOM 时，它说文档没有建立

标签： javascript html node.js

【解决方案1】：

实际上没有，通常人们使用库或框架来连接前端和后端，在你的例子中是 Node.js。

你可以使用reactjs，但是如果你觉得这时候比较复杂你可以使用EJS来在你的html中显示数据，用npm安装很容易。

npm 安装 ejs

【讨论】：

但我从 html 接收日期到节点我如何将它们写入 html
你能多谈谈 EJS
EJS 是一个库，您可以从 npm 安装它，简而言之，您可以像这样从节点 js 后端传递数据：res.json({yourdata:yourdata})。在您的 html 文件中，您可以像这样使用带有 ejs 的 for 循环：
您将在上面评论中的链接中找到您要查找的确切信息

【解决方案2】：

在nodejs中编辑html，可以使用cheerio

如果"lol" 是一个元素，那么替换它会非常简单：

let $ = require('cheerio').load(inputHtml)
$('lol').replaceWith(`<span>${date}</span>`)

但是，在您的问题中，您似乎需要将匹配 /lol/ 正则表达式的文本替换为 <span>[date]</span>。

下面的代码通过迭代所有文本节点来做到这一点：

const $ = require('cheerio').load(inputHtml);
const getTextNodes=(elem)=>elem.type==='text'?[]:
        elem.contents().toArray()
        .filter(el=>el!==undefined)//I don't know why some elements are undefined
        .reduce((acc, el)=>
            acc.concat(...el.type==='text'?[el]:getTextNodes($(el))), [] )
    
    
let replaceRegex = /lol/;
let date = new Date().toLocaleDateString('en-US');

getTextNodes($(`html`))
    .filter(node=>$.html(node).match(replaceRegex))
    .map(node=>$(node).replaceWith($.html(node).replace(replaceRegex, `<span>${date}</span>`))  );

console.log($.html());

所以对于以下输入：

<html>
    <head></head>
    <body>
        <p>This is some lol text</p>
        Some other lol text
    </body>
</html>

你会得到以下输出：

<html><head></head><body>
        <p>This is some <span>3/18/2021</span> text</p>
        Some other <span>3/18/2021</span> text
    
</body></html>

【讨论】：

我想知道这些更改是否是永久性的，例如，如果网站上有其他用户，他们是否也会在访问该网站时永久看到此内容？允许人们为其他用户编辑 html。
@DiamondKingx 这取决于您要存储输出的位置。如果您将此代码运行到服务器端或对服务器具有上传访问权限，则覆盖您刚刚读取的文件的内容，输出为$.html()（最后一行），将更新所有用户的下一个请求（假设您使用静态服务的站点）。对于动态站点，您需要将输出保存到某个存储（例如 db）中，从该存储中读取并根据请求将其发送到每个浏览器。还有支持自动刷新浏览器内容而不需要重新加载页面的推送机制
感谢您的回复！