当 HTML 标签包含在 JavaScript 代码中时，如何使 JSHint 发出警告？

Posted 2023-02-22

【中文标题】当 HTML 标签包含在 JavaScript 代码中时，如何使 JSHint 发出警告？

【英文标题】：How to make JSHint warn when HTML tags are included in JavaScript code?

【发布时间】：2013-04-15 19:59:44

【问题描述】：

在我们的开发商店中，我们使用客户端模板并且在我们的 javascript 代码中不包含 html 标记。

在我们的持续集成过程中，我们会在每次提交（Jenkins 中的构建后操作）后自动运行 JSHint，以验证是否符合我们的编码风格指南。

我想配置 JSHint，这样当它在 .js 文件中找到 HTML 标记时会引发警告。

我怎样才能做到这一点？我已经搜索过了，但我找不到 HTML 标记警告的示例，也找不到 JSHint 的自定义规则。

编辑：

为了清楚起见，我试图捕捉这样的代码：

var newDiv = "<div>Hello World!</div>";
$("body").append(newDiv);

如果我能让 JSHint 为上面示例中的第一行生成警告，那就太好了。

第二次编辑：

如果 Jenkins 有构建后插件，如果在 .js 文件中找到 HTML，可能会引发验证错误，那么这也是一个很好的替代解决方案。

【问题讨论】：

在 js 文件中包含 html 标记通常无论如何都会出错。为什么在 jshint 中需要它？

@ben336 我说的是这样的事情：var newDiv = "<div>form goes here</div>"; $('body').append(newDiv);

那只是一个字符串。而不是一个“错误”的任何验证过的东西也不允许像var example="I'm writing a report on <div> tags and css";

@ben336 您提供的示例在我们的开发商店中是不允许的。需要明确的是，我并不是提倡每个人都采用我们的开发风格，但我仍然希望 JSHint 帮助执行我们内部的编码风格决策。如果您有兴趣，您应该阅读 Nicholas Zakas 和其他人对 JavaScript 应用程序的可维护性和关注点分离的看法：bit.ly/pXUM9A

【参考方案1】：

答案

不，jSHint 不支持在字符串中禁止任意字符串内容或 HTML 标记。它目前也不支持自定义规则，尽管作者已经讨论过添加公共 api in the future.

我对 WHY 的猜测（因为我不是内部人员）

无论您对在 js 中创建 HTML 有什么看法，您提出的解决方案（在任何情况下都不允许使用任何 HTML 标记）将不允许各种高度有效的用例。我知道这是您的团队想要做的，但是这样一个生硬的规则不会具有其余 jsHints 规则的普遍适用性。他们的重点是执行风格规则。由于您不允许字符串中的所有 HTML 标记，因此这实际上更像是一种内容验证，而不是一种样式验证。它将消除以下与 DOM 注入/关注点分离无关的 content 示例。

例如：

var example="I'm writing a report on <div> tags and css";

或

var htmlStrippedText = text.replace("<div>","");

我的建议

当然，缺乏广泛的适用性并不是您不这样做的理由。如果您真的想过滤这样的内容，请使用命令行脚本使用正则表达式进行搜索。由于您只想查看是否存在 HTML，而不是是否有效，因此您可以搜索 <[div|span|body|html... 和 document.createElement 形式的内容，应该没问题（尽管如果您可能需要更有创意想允许它在 cmets 内）。只是不要使用 nodejs 来运行带有 JS 的脚本，否则它将无法验证自身。 :)

当然，这一切都不会阻止坚定的开发者：

var topSecretDOMObject,topSecretFunction,topSecretArgument;
topSecretFunction = "create"+"Element";
topSecretArgument = "d" + "i" + "v";
topSecretDOMObject = document[topSecretFunction](topSecretArgument);

【讨论】：

您提供的示例在我们的开发商店中是不允许的。需要明确的是，我并不是提倡每个人都采用我们的开发风格，但我仍然希望 JSHint 帮助执行我们内部的编码风格决策。如果您有兴趣，您应该阅读 Nicholas Zakas 和其他人对 JavaScript 应用程序的可维护性和关注点分离的看法：bit.ly/pXUM9A

我知道您想强制执行该样式。我试图指出，没有办法从 HTML 中挑出用于插入 HTML 的 HTML，这些 HTML 用于替换之类的东西。无论如何，我的答案是成立的，没有 jsHint 不支持这一点，也不支持自定义规则

我们的 JavaScript 代码中没有 HTML 标签。您的行：“无法从用于替换之类的 HTML 中插入用于插入 HTML 的 HTML”与我的问题无关。如果我无法区分 HTML 字符串，这不是问题，因为在我们的 JS 代码中存在 HTML 标记的情况为零。我希望 JSHint 可以通过某种方式检测 HTML 并发出警告。

我已经告诉过你，截至今天还没有 :) 我已经扩展了我的答案，并将事实部分从我的评论中分离出来，以便清楚。

抓住你的“我正在写一篇关于 标签的报告...”可能是众所周知的好事。为什么不强迫人们写$("#logs").append("I'm writing a report on <div> tags and css");？而且我不确定确定的开发人员方案是否会降低 OP 原始问题的有用性。不要让完美妨碍美好等等。我并不是完全支持@ElliotB。的提议规则，但目标不是规定文化，而是提供解决方案。你的JHint API possibility 看起来很有趣。