javascript - How to detect unofficial tags in html? - Stack Overflow

admin管理员组

文章数量:1362177

Given an HTML node, how would you tell if it bears official HTML tag or not?

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

In above code snippet I want h9 is not official html tag. How do I find it out programmatically using JS?

Edit: Preferably in O(1)

Given an HTML node, how would you tell if it bears official HTML tag or not?

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

In above code snippet I want h9 is not official html tag. How do I find it out programmatically using JS?

Edit: Preferably in O(1)

• javascript
• html

Share Improve this question Follow edited Dec 30, 2018 at 20:21 asdasd asked Dec 30, 2018 at 20:14 asdasdasdasd 7,25066 gold badges1515 silver badges3636 bronze badges 5

• Using what language / toolkit? – user149341 Commented Dec 30, 2018 at 20:17
• using javascript language – asdasd Commented Dec 30, 2018 at 20:18
• Look at this developer.mozilla/en-US/docs/Web/HTML/Element – Aakash Verma Commented Dec 30, 2018 at 20:26
• "Just remember to return true if some-tag has a - dash". Why do you say that. None of the html tags have dash. – asdasd Commented Dec 30, 2018 at 20:27
• 1 @i_read_terms_and_services because you can create webComponents and registering them using JS. The only rule is that a tag must contain a dash. github./w3c/webponents – Roko C. Buljan Commented Dec 30, 2018 at 20:30

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 8

Someone already wrote a good function for this, see usage guide on GitHub.

Example:

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./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))">

Consider the following:

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

Note that this will not work properly for natively implemented custom elements. So barring that edge case you can easily use this method to check if a given tag is official, and unlike a hard-coded list it is future proof against new tags being added.

Note on performance:

the above check does run in O(1) time but checking every tag in the DOM will be much, much slower.

You can use tagName property to get the tag name of the element and pare it with a list of official html tags. I found this package containing all html tags https://github./wooorm/html-tag-names

I highly remendsanitize-html, which is a really flexible package in nodejs that sanitizes input html tags. I have only used it in nodejs applications, however I think that you can include it in a browser script.

You can add it by:

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

You can simply check whether the input HTML has changed after the sanitization, returning a boolean data type.

This is an example of sanitize-html, using the default allowed tags:

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

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

You can can get a better idea by reading the official documentation: https://www.npmjs./package/sanitize-html

I could create my own XML tags, and create a reference document that defines the schema for those tags. Since HTML, which es from XML, has a standard schema of known tags, you can do this:

<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
}

本文标签： javascriptHow to detect unofficial tags in htmlStack Overflow