如果HTML元素可以包含一些文本,是否有一种干净而健壮的方式可以测试(使用纯javascript或jQuery)?
例如,<br>
,<hr>
或<tr>
不能包含文本节点,<div>
,<td>
或<span>
可以。
测试此属性的最简单方法是控制标记名称。但这是最好的解决方案吗?我认为这是最糟糕的......
编辑:为了澄清问题的意义,需要指出完美的答案应该考虑两个问题:
显然,上一个列表的每个点都有一个子答案。
答案 0 :(得分:5)
The W3 standard for "void elements"指定:
无效元素
area,base,br,col,embed,hr,img,input,keygen,link,menuitem,meta,param,source,track,wbr
显然还有一些unofficial标签。
您可以制作黑名单并使用.prop('tagName')
获取标记名称:
(function ($) {
var cannotContainText = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'BASEFONT', 'BGSOUND', 'FRAME', 'ISINDEX'];
$.fn.canContainText = function() {
var tagName = $(this).prop('tagName').toUpperCase();
return ($.inArray(tagName, cannotContainText) == -1);
};
}(jQuery));
$('<br>').canContainText(); //false
$('<div>').canContainText(); //true
在这里,您还可以将自己的标记添加到cannotContainText
(例如,添加<tr>
,这不是正式的空格元素,因为它与specification“不匹配void元素是一个元素,其内容模型永远不允许它在任何情况下都有内容.Void元素可以有属性。“)。
答案 1 :(得分:1)
我相信您正在寻找void HTML tags的列表:
以下是HTML中的void元素的完整列表:
area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr
从那里你只需要测试节点以查看它是否在列表中。例如:
var voidNodeTags = ['AREA', 'BASE', ...];
var isNodeVoid = function (node) {
return voidNodeTags.indexOf(node.nodeName) !== -1;
};
答案 2 :(得分:0)
我大多同意所有人的观点,黑名单是一种非常正统的做法,但如果我们真的需要测试这种能力,那么这将是我认为的一种方式(有一些 jquery ):
isTextContainerTag=function(tagName){
try{
var test = $('<'+tagName+'></'+tagName+'>');
test.html(123);
if(test.html()=='123'){
return true;
}else{
return false;
}
}
catch(err){return false;}
}
我在Chrome上使用各种标签名称对其进行了测试,并获得了以下结果:
console.log('input',isTextContainerTag('input'));//answer:false
console.log('textarea',isTextContainerTag('textarea'));//true
console.log('option',isTextContainerTag('option'));//true
console.log('ul',isTextContainerTag('ul'));//true
console.log('li',isTextContainerTag('li'));//true
console.log('tr',isTextContainerTag('tr'));//true
console.log('td',isTextContainerTag('td'));//true
console.log('hr',isTextContainerTag('hr'));//false
console.log('br',isTextContainerTag('br'));//false
console.log('div',isTextContainerTag('div'));//true
console.log('p',isTextContainerTag('p'));//true
console.log('html',isTextContainerTag('html'));//false
console.log('body',isTextContainerTag('body'));//false
console.log('table',isTextContainerTag('table'));//false
console.log('tbody',isTextContainerTag('tbody'));//true
我们也可以在这两个例子中使用jquery“prop”测试一些真正的标签:
<div id="A">AAAAAA</div>
<br id="B">
给出了:
var obj1 = $('#A').prop('tagName');
var obj2 = $('#B').prop('tagName');
console.log('id:A (div)',isTextContainerTag(obj1));//true
console.log('id:B (br)',isTextContainerTag(obj2));//false
我确信它离完美不远,但是看起来很有趣。