Question

给出一个HTML节点，您如何判断它是否带有官方HTML标记？

<h9 id="someNodeId">hello<h9>
let node = document.getElementById("someNodeId");

在上述代码段中，我希望h9不是官方的html标签。如何使用JS以编程方式找到它？

编辑：最好在O(1)

Answer 1

有人为此写了一个很好的函数，请参见usage guide on GitHub。

示例：

isElementSupported("h1"); // true
isElementSupported("h9"); // false

/*
 * isElementSupported
 * Feature test HTML element support 
 * @param {String} tag
 * @return {Boolean|Undefined}
 */

(function(win){
    'use strict';       

    var toString = {}.toString;

    win.isElementSupported = function isElementSupported(tag) {
        // Return undefined if `HTMLUnknownElement` interface
        // doesn't exist
        if (!win.HTMLUnknownElement) {
            return undefined;
        }
        // Create a test element for the tag
        var element = document.createElement(tag);
        // Check for support of custom elements registered via
        // `document.registerElement`
        if (tag.indexOf('-') > -1) {
            // Registered elements have their own constructor, while unregistered
            // ones use the `HTMLElement` or `HTMLUnknownElement` (if invalid name)
            // constructor (http://stackoverflow.com/a/28210364/1070244)
            return (
                element.constructor !== window.HTMLUnknownElement &&
                element.constructor !== window.HTMLElement
            );
        }
        // Obtain the element's internal [[Class]] property, if it doesn't 
        // match the `HTMLUnknownElement` interface than it must be supported
        return toString.call(element) !== '[object HTMLUnknownElement]';
    };
    
})(this);

Tag: <input id="toCheck" type="text" value="h9"><br><br>
Is supported? <input id="result" type="text" readonly><br><br>
<input type="submit" value="Check Tag" onclick="document.getElementById('result').value= (isElementSupported(document.getElementById('toCheck').value))">

Answer 2

请考虑以下内容：

const foo = document.createElement('h9');
console.log(foo.constructor.name); // HTMLUnknownElement

请注意，这对于本机实现的custom elements无法正常工作。因此，除非出现这种情况，否则您可以轻松地使用此方法来检查给定标签是否为正式标签，并且与硬编码列表不同，它可以防止添加新标签。

性能说明：

上面的检查确实可以在O（1）时间中运行，但是检查DOM中的每个标签的速度会慢得多。

Answer 3

您可以使用def f(n: Int) = { for (i <- 1 to n) { println("Hello World") } } f(50)属性获取元素的tag name并将其与官方html标签列表进行比较。我发现此程序包包含所有html标签https://github.com/wooorm/html-tag-names

Answer 4

我强烈推荐sanitize-html，它是nodejs中一个非常灵活的软件包，用于清理输入的html标签。我只在nodejs应用程序中使用过它，但是我认为您可以将其包含在浏览器脚本中。

您可以通过以下方式添加它：

 <script type="text/javascript"  src="dist/sanitize-html.js"></script>

您可以简单地检查清理后的输入HTML是否已更改，并返回布尔数据类型。

这是sanitize-html的示例，使用默认的允许标签：

var sanitizeHtml = require('sanitize-html');

var dirty = 'some really tacky HTML';
var clean = sanitizeHtml(dirty);

通过阅读官方文档，您可以得到更好的主意： https://www.npmjs.com/package/sanitize-html

Answer 5

我可以创建自己的XML标签，并创建定义这些标签的架构的参考文档。由于来自XML的HTML具有已知标记的标准架构，因此您可以执行以下操作：

<h9 id='someNodeId'>Hello, world!</h9>

//list the valid tags for HTML here
let tags = ["h1","h2","h3","h4","h5","h6"];

let node = document.getElementById('someNodeId');
if( tags.find( node.tagName.toLowerCase() ) != undefined ) {
   //valid
}
else {
   //invalid
}

如何检测HTML中的非官方标签？

5 个答案:

性能说明：