CODEWITHSUNDEEP
javascriptjqueryhtmlregex
Lost
Lost

Reputation: 13575

Validating for valid html tags in javascript

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:)

Upvotes: 1

Views: 4636

Answers (2)

SpYk3HH
SpYk3HH

Reputation: 22570

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>

Upvotes: 0

AlexMA
AlexMA

Reputation: 10202

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.

Upvotes: 2

Related Questions