1

文字列「div」または「abc」が与えられた場合、その文字列が有効な html4 tagName であるかどうかを判断する方法はありますか?

を使用してみdocument.createElement()ましたが、何でも満足しています:

document.createElement('trash')
=> <trash></trash>

使用できませんHTML<tag>Element。例えば

document.createElement('tbody')
=> HTMLTableSelectorElement
4

3 に答える 3

6

最善の方法は、すべての有効な HTML4 要素のリストを用意して、それを確認することです。これにより、100% の確率で「有効な HTML4 要素」の正しい結果が得られます。ここから：

var html4 = ["A","ABBR","ACRONYM","ADDRESS","APPLET","AREA","B","BASE","BASEFONT","BDO","BIG","BLOCKQUOTE","BODY","BR","BUTTON","CAPTION","CENTER","CITE","CODE","COL","COLGROUP","DD","DEL","DFN","DIR","DIV","DL","DT","EM","FIELDSET","FONT","FORM","FRAME","FRAMESET","H1","H2","H3","H4","H5","H6","HEAD","HR","HTML","I","IFRAME","IMG","INPUT","INS","ISINDEX","KBD","LABEL","LEGEND","LI","LINK","MAP","MENU","META","NOFRAMES","NOSCRIPT","OBJECT","OL","OPTGROUP","OPTION","P","PARAM","PRE","Q","S","SAMP","SCRIPT","SELECT","SMALL","SPAN","STRIKE","STRONG","STYLE","SUB","SUP","TABLE","TBODY","TD","TEXTAREA","TFOOT","TH","THEAD","TITLE","TR","TT","U","UL","VAR"];

var valid = html4.indexOf(name.toUpperCase()) !== -1;

何らかの理由で絶対にそうしたくない場合、または実際には HTML4 を意味するものではなく、IE8 との互換性について心配していない場合は、次のようにすることができます。

var valid = !(document.createElement(name) instanceof HTMLUnknownElement);
于 2013-01-20T03:00:22.257 に答える
1

これに対する解決策を探していましたが、もう少し完全です。以下のスニペットは、Stack と Google を検索した最終結果です。そこにある HTML4 配列のチェックほど単純ではありませんが、それほど複雑でもありません。

方法は簡単です。それを呼び出して、文字列をパラメーターとして渡し、true有効な HTML5 タグであれば返されます。これまでのところ、考えられるすべてのタグで機能しています。

「allowObsolete」という名前の 2 番目のパラメーターがあります。名前が示すように、廃止されたタグがapplettrue を返すようにすることもできます。それ以外の場合、廃止されたタグは自動的に false を返します。

もう一つ！-1古いチェックを完全にバイパスするには、2 番目のパラメーターとして渡します。廃止されたチェックは、2014 年 10 月 28 日の時点で廃止されたタグのW3C HTML5 標準から作成された配列に基づいて実行されます。

少し余分。CSS セレクター/比較記号を渡そうとすると false を返す小さなビットを追加しました。基本的に、英数字以外の文字は false を返します。編集する場合は、 のようなタグがあるため、アルファだけに限定できないことに注意してくださいh1。

シンプルなスニペット

/** isValidHTMLTag(String, Mixed Var)
 * 
 *  @description Simple and effective way of checking whether an string is a valid HTML Tag Name.
 *
 *  @note Not yet tested on all Browsers. Use discreetly.
 *
 *  @example isValidHTMLTag('input');   //  returns `true`
 *  @example isValidHTMLTag('blink');   //  returns `false` because `blink` is obsolete
 *  @example isValidHTMLTag('blink', true); //  returns `true`
 *  @example isValidHTMLTag('blink', -1);   //  returns `false` in an HTML5 browser
 *  
 *  @param {String} tagName *Required | The string to check for validity.
 *  @param {Boolean|Integer} Determine whether or not to allow possible Obsolete Tag Names to return true. Set to `-1` to completely bypass this option. [undefined==false]
 *  @returns {Boolean} `true` if valide, otherwise `false`
 */
function isValidHTMLTag(tagName, allowObsolete) {   //  use `-1` as second parameter to completely bypass allowObsolete check
    var obsolete = ['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'];
    return tagName.match(/[^a-zA-Z0-9]/) ? !1 : -1 !== allowObsolete && -1 !== obsolete.indexOf(tagName) ? allowObsolete || !1 : "[object HTMLUnknownElement]" !== Object.prototype.toString.call(document.createElement(tagName));
}

一発ギャグ！

function isValidHTMLTag(a,b){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(" ");return a.match(/[^a-zA-Z0-9]/)?!1:-1!==b&&-1!==c.indexOf(a)?b||!1:"[object HTMLUnknownElement]"!==Object.prototype.toString.call(document.createElement(a))};

いたずらなヒント DOM を変更してください! 以下を使用して

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

//  Use like:
var blinky = document.createElement('blink');
if (!blinky.isValidTag()) {
    var head = document.head || document.getElementsByTagName("head")[0],
        style = document.createElement("style");
    style.appendChild(document.createTextNode("@keyframes blink { from { opacity: 1; } to { opacity: 0; } }"));
    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);
}

次に、このスニペットのようなことができます!

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

$('body > *:not(hr)').each(function(i) {
  $(this).find('.tag-name').text(this.tagName);
  $(this).find('.is-not').html('is' + (this.isValidTag(i==5?-1:null) ? '' : ' <b>NOT</b>'));
});
/* Standard (Mozilla) */
@keyframes blink { from { opacity: 1; } to { opacity: 0; } }
/* Chrome & Safari */
@-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } }
blink { -webkit-animation: blink 600ms infinite; animation: blink 600ms infinite; text-decoration: blink; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Tag Name [<b><span class="tag-name"></span></b>] [<i><span class="is-not"></span></i>] legal</div>
<hr />
<blink>Tag Name [<b><span class="tag-name"></span></b>] [<i><span class="is-not"></span></i>] legal</blink>
<hr />
<p>Tag Name [<b><span class="tag-name"></span></b>] [<i><span class="is-not"></span></i>] legal</p>
<center>Tag Name [<b><span class="tag-name"></span></b>] [<i><span class="is-not"></span></i>] legal <sub>but is still supported in most browsers. Thus use the bypass param "-1"</sub></center>
<hr />
<center>Tag Name [<b><span class="tag-name"></span></b>] [<i><span class="is-not"></span></i>] legal</center>
<hr />
<article>Tag Name [<b><span class="tag-name"></span></b>] [<i><span class="is-not"></span></i>] legal</article>
<hr />
<header>Tag Name [<b><span class="tag-name"></span></b>] [<i><span class="is-not"></span></i>] legal</header>
<hr />
<a href="javascript:void 0">Tag Name [<b><span class="tag-name"></span></b>] [<i><span class="is-not"></span></i>] legal</a>
<hr />
<penguin>Tag Name [<b><span class="tag-name"></span></b>] [<i><span class="is-not"></span></i>] legal</penguin>
<hr />
<pre>Tag Name [<b><span class="tag-name"></span></b>] [<i><span class="is-not"></span></i>] legal</pre>
<hr />
<footer>Tag Name [<b><span class="tag-name"></span></b>] [<i><span class="is-not"></span></i>] legal</footer>
<hr />
<bob>Tag Name [<b><span class="tag-name"></span></b>] [<i><span class="is-not"></span></i>] legal</bob>
<hr />
<h9>Tag Name [<b><span class="tag-name"></span></b>] [<i><span class="is-not"></span></i>] legal</h9>

于 2015-03-13T13:49:46.240 に答える
0

かなり単純な手法は、有効な HTML 要素の独自のセットを定義することです。

Array.prototype.contains = function(k) {
   return (this.indexOf(k) > -1;
}
var ValidTags = ['html', 'head', ....];
//Then compare
if(ValidTags.contains('trash')) {
   //Then its valid
}
于 2013-01-20T03:02:39.963 に答える