一部の入力に対してjavascriptで検証を行い、有効なHtmlタグである場合は有効に戻したいと考えていました。
JQueryを使用してそれを行う簡単な方法はありますか? そうでない場合、正規表現を使用してそれを行う方法はありますか?
ありがとう:)
一部の入力に対してjavascriptで検証を行い、有効なHtmlタグである場合は有効に戻したいと考えていました。
JQueryを使用してそれを行う簡単な方法はありますか? そうでない場合、正規表現を使用してそれを行う方法はありますか?
ありがとう:)
有効なタグの配列を作成してから、jQueryを使用することができます。inArray(tag、validTags);
var validTags = ["<html>","<body>","<div>"];
var valid = function(tag){
return $.inArray(tag,validTags);
}
var x = valid("<body>"); //evaluates to true
文字のみのタグ名を受け入れたい場合は、次の正規表現を使用してください。徹底的にテストされていませんが、大文字と小文字を区別しない1つ以上の文字を受け入れるように設計されています。数字も許可する場合は、角かっこ間に\ dを追加します(例:[A-Za-Z \ d])。
var validTag = /^<\/?[A-Za-z]+>$/;
var valid = function(tag){
return validTag.test(tag);
}
正規表現のヘルプ については、このページを参照してください。
私はずっと前にこのためのメソッドを書きました。それ以来、それをElement
プロパティとして実装しました。以下のコードを使用して、要素のタグの有効性を次のように簡単にテストします。
ele.isValidTag();
たとえば、blink
が有効かどうかを確認し、有効でない場合は CSS を挿入して<blink>
タグを実際に点滅させるには、次のようにします。
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);
}
注:古いタグを含めるには、
のパラメータを受け入れますまたは、廃止されたチェックをすべて自動的にバイパスするために使用しますtrue
-1
/* 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 */
例:
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>