Question

无论何时我们从数据库或类似来源获取一些用户输入的内容并进行了一些编辑，我们都可能会检索仅包含开始标记但没有结束标记的部分。

这可能会妨碍网站的当前布局。

是否有node.js服务器端方法来解决此问题？

这个问题已经回答here，但是在PHP中。

内部HTML解决方案 一种innerHTML solution的解决方案可能有效，但对我而言不起作用... 这是代码：

var divTemp = document.createElement("div");
divTemp.innerHTML = html;

setTimeout(function() {
  console.log(divTemp.innerHTML);
  $("input[name='" + inputName + "']").val(divTemp.innerHTML);
}, 6000);

这是我输入的html的示例：

<h2 style="box-sizing: inherit; font-family: &quot;Segoe UI&quot;, Arial, sans-serif; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0);">Definition and Usage</h2><p style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: Verdana, sans-serif; font-size: 15px;">The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.</p><p style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: Verdana, sans-serif; font-size: 15px;"><b style="box-sizing: inherit;">Tip:</b>&nbsp;1000 ms = 1 second.</p><p style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: Verdana, sans-serif; font-size: 15px;"><strong style="box-sizing: inherit;">Tip:</strong>&nbsp;The function is only executed once. If you need to repeat execution, use the&nbsp;<a href="https://www.w3schools.com/jsref/met_win_setinterval.asp" style="box-sizing: inherit; color: inherit;">setInterval()</a>&nbsp;method.&nbsp;</p><p style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: Verdana, sans-serif; font-size: 15px;"><strong style="box-sizing: inherit;">Tip:</strong>&nbsp;Use the&nbsp;<a href="https://www.w3schools.com/jsref/met_win_cleartimeout.asp" style="box-sizing: inherit; color: inherit;">clearTimeout()</a>&nbsp;method to prevent the function from running.</p><div><br></div>

最后，divTemp.innerHTML和html相同。

所以，我正在等待解决方案，或者是内部HTML解决方案无法正常工作的原因。

非常感谢！

@Marcos Casagrande的解决方案解决方案

我正在这样做，但是问题仍然相同... 这是我的代码：

return {
    title: req.body.name,
    description: cheerio
      .load(
        striptags(
          req.body.type === "campaign"
            ? req.body.campaignDescription
            : req.body.type === "donate"
              ? req.body.donateDescription
              : "",
          [
            "div",
            "strong",
            "b",
            "h1",
            "h2",
            "blockquote",
            "i",
            "u",
            "strike",
            "br",
            "img",
            "pre",
            "p",
            "ol",
            "ul",
            "li",
            "hr",
            "a"
          ]
        ),
        { xmlMode: true }
      )
      .html()
}

使用此解决方案，此：

<h2 style="padding: 2px 0px 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; line-height: 26px; font-size: 14px; color: rgb(255, 255, 255); background-image: url(&quot;/public/images/v6/maincol_gradient_rule.png&quot;); background-repeat: no-repeat; background-position: left bottom; font-family: &quot;Motiva Sans&quot;, sans-serif; text-transform: uppercase; letter-spacing: 2px; background-color: rgb(27, 40, 56);">WE. THE REVOLUTION - NEW GAMEPLAY!</h2><p style="padding: 0px; margin-bottom: 8px; color: rgb(172, 178, 184); font-family: &quot;Motiva Sans&quot;, sans-serif; background-color: rgb(27, 40, 56);">Liberty, Equality, Fraternity...or Death! Are You ready to choose? Your career or your family, your prosperity or their misery? It is easy to judge stranger people but how will you manage to adjudicate upon your dearest?</p><h2 class="bb_tag" style="padding: 2px 0px 0px; margin: 18px 0px 0px; line-height: 26px; font-size: 15px; color: rgb(47, 137, 188); background-image: none; background-repeat: no-repeat; background-position: left bottom; font-family: &quot;Motiva Sans&quot;, sans-serif; background-color: rgb(27, 40, 56);">See We. The Revolution New Gameplay!</h2>

成为

<h2 style="padding: 2px 0px 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; line-height: 26px; font-size: 14px; color: rgb(255, 255, 255); background-image: url(&quot;/public/images/v6/maincol_gradient_rule.png&quot;); background-repeat: no-repeat; background-position: left bottom; font-family: &quot;Motiva Sans&quot;, sans-serif; text-transform: uppercase; letter-spacing: 2px; background-color: rgb(27, 40, 56);">WE. THE REVOLUTION - NEW GAMEPLAY!</h2><p style="padding: 0px; margin-bottom: 8px; color: rgb(172, 178, 184); font-family: &quot;Motiva Sans&quot;, sans-serif; background-color: rgb(27, 40, 56);">Liberty, Equality, Fraternity...or Death! Are You ready to choose? Your career or your family, your prosperity or their misery? It is easy to judge stranger people but how will you manage to adjudicate upon your dearest?</p><h2 class="bb_tag" style="padding: 2px 0px 0px; margin: 18px 0px 0px; line-height: 26px; font-size: 15px; color: rgb(47, 137, 188); background-image: none; background-repeat: no-repeat; background-position: left bottom; font-family: &quot;Motiva Sans&quot;, sans-serif; background-color: rgb(27, 40, 56);">See We. The Revolution New Gameplay!</h2>

它仍然会破坏网站布局...

Answer 1

您可以使用cheerio来实现。

给出以下损坏的HTML：

<div>Name<span>Hey</span>

您可以获得：

<div>Name<span>Hey</span></div>

const cheerio = require('cheerio');
const brokenHtml = '<div>Name<span>Hey</span>';

const $ = cheerio.load(brokenHtml, { xmlMode: true });

console.log($.html()); // <div>Name<span>Hey</span></div>

如果您不使用：xmlMode: true，则会得到此替代，它可能对您有用：

<html>

<head></head>

<body>
    <div>Name<span>Hey</span></div>
</body>

</html>

Answer 2

如果您说innerHTML解决方案因为您正在使用Node.js而不适用于您，因此您没有DOM，那么Node.js就有多个DOM解析器。例如，使用jsdom：

const { JSDOM } = require("jsdom");
const str = "<div><span><em>foo";
const dom = new JSDOM(str);
console.log("Before:", str);
console.log("After:", dom.window.document.body.innerHTML);

输出：

Before: <div><span><em>foo
After: <div><span><em>foo</em></span></div>

如何关闭node.js中未关闭的HTML标签？

2 个答案: