Validating for valid html tags in javascript

Question

I wanted to conduct a validation in javascript for some input and return valid if it is a valid Html tag.

Is there any easy way using JQuery to do that? If not then is there any way I can do it using Regex?

Thanks:)

Check for jQuery plugin library for validation plugins: docs.jquery.com/Plugins/Validation — adamb
– adamb, Commented Feb 5, 2013 at 2:25

AlexMA · Accepted Answer · 2013-02-05 13:41:47Z

2

You could just make an array of valid tags then use jQuery.inArray(tag, validTags);

var validTags = ["<html>","<body>","<div>"];
var valid = function(tag){
    return $.inArray(tag,validTags);
}
var x = valid("<body>"); //evaluates to true

Here is a regex to get you started if you want to accept any tag name with only letters. It's not been thoroughly tested, but is designed to accept one or more case-insensitive letters. If you also want to allow numbers, add in a \d between the brackets too e.g. [A-Za-Z\d].

var validTag = /^<\/?[A-Za-z]+>$/;
var valid = function(tag){
  return validTag.test(tag);
}

See this page for more regex help.

edited Feb 5, 2013 at 13:41

answered Feb 5, 2013 at 2:25

AlexMA

10.3k8 gold badges46 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lost Over a year ago

That is true but I wanted to see if there is a way to regex it. Actually I have not been clear..... If it is a tag then also that is fine.....does not have to come from W3C approved Tag collection that html supports. If it is <XYZ or <XYZ/> that's fine. Does not have to be HTML. But it certainly has to be a tag....

AlexMA Over a year ago

That sounds more like XML though I'm not positive. But I see the array wouldn't work.

AlexMA Over a year ago

Does that tag name have any restrictions? Just letters or numbers? Is a number allowed as the first character?

SpYk3HH · Accepted Answer · 2016-02-25 21:15:15Z

I wrote a method for this a long while back. I've since implemented it into being an Element property. Use the code below to test validity of an Element's tag as simple as:

ele.isValidTag();

So, for instance, if you wanted to see if blink was valid, and if not, insert a CSS to make <blink> tags actually blink, you could do:

if (!document.createElement('blink').isValidTag()) {
    var head = document.head || document.getElementsByTagName("head")[0],
        style = document.createElement("style");
    /* Standard (Mozilla) */
    style.appendChild(document.createTextNode("@keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
    /* Chrome & Safari */
    style.appendChild(document.createTextNode("@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
    style.appendChild(document.createTextNode("blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; text-decoration: blink; }"));
    head.appendChild(style);
}

NOTE:
Accepts parameter of true, to include obsolete tags. OR use -1 to automatically bypass obsolete check all together.

/*  Copy && Paste   */
Object.defineProperty&&!Element.prototype.hasOwnProperty("isValidTag")?Object.defineProperty(Element.prototype,"isValidTag",{value:function(b){if(this.tagName){var c="acronym applet basefont bgsound big blink center dir font frame frameset hgroup isindex listing marquee multicol nextid nobr noembed noframes plaintext spacer strike tt xmp".split(" "),a=this.tagName;return a.match(/[^a-zA-Z0-9]/)?!1:-1!==b&&-1!==c.indexOf(a.toLowerCase())?b||!1:"[object HTMLUnknownElement]"!==Object.prototype.toString.call(document.createElement(a))}return!1}}):Element.prototype.isValidTag=function(b){if(this.tagName){var c="acronym applet basefont bgsound big blink center dir font frame frameset hgroup isindex listing marquee multicol nextid nobr noembed noframes plaintext spacer strike tt xmp".split(" "),a=this.tagName;return a.match(/[^a-zA-Z0-9]/)?!1:-1!==b&&-1!==c.indexOf(a.toLowerCase())?b||!1:"[object HTMLUnknownElement]"!==Object.prototype.toString.call(document.createElement(a))}return!1};
/*  Copy && Paste   */

Example:

Object.defineProperty && !Element.prototype.hasOwnProperty("isValidTag") ? Object.defineProperty(Element.prototype, "isValidTag", {
        value: function(b) {
            if (this.tagName) {
                var c = "acronym applet basefont bgsound big blink center dir font frame frameset hgroup isindex listing marquee multicol nextid nobr noembed noframes plaintext spacer strike tt xmp".split(" "),
                    a = this.tagName;
                return a.match(/[^a-zA-Z0-9]/) ? !1 : -1 !== b && -1 !== c.indexOf(a.toLowerCase()) ? b || !1 : "[object HTMLUnknownElement]" !== Object.prototype.toString.call(document.createElement(a))
            }
            return !1
        }
    }) :
    Element.prototype.isValidTag = function(b) {
        if (this.tagName) {
            var c = "acronym applet basefont bgsound big blink center dir font frame frameset hgroup isindex listing marquee multicol nextid nobr noembed noframes plaintext spacer strike tt xmp".split(" "),
                a = this.tagName;
            return a.match(/[^a-zA-Z0-9]/) ? !1 : -1 !== b && -1 !== c.indexOf(a.toLowerCase()) ? b || !1 : "[object HTMLUnknownElement]" !== Object.prototype.toString.call(document.createElement(a))
        }
        return !1
    };

if (!document.createElement('blink').isValidTag()) {
	var head = document.head || document.getElementsByTagName("head")[0],
		style = document.createElement("style");
	/* Standard (Mozilla) */
	style.appendChild(document.createTextNode("@keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
	/* Chrome & Safari */
	style.appendChild(document.createTextNode("@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
	style.appendChild(document.createTextNode("blink { -webkit-animation: blink 800ms infinite; animation: blink 800ms infinite; text-decoration: blink; }"));
	head.appendChild(style);
}

<p>
  Hi <blink>I</blink> should be <blink>Blinking</blink>!
</p>

Collectives™ on Stack Overflow

Validating for valid html tags in javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related