测试元素是否可以包含文本

时间:2013-11-05 13:44:36

标签: javascript jquery html dom

如果HTML元素可以包含一些文本,是否有一种干净而健壮的方式可以测试(使用纯javascript或jQuery)?

例如,<br><hr><tr>不能包含文本节点,<div><td><span>可以。

测试此属性的最简单方法是控制标记名称。但这是最好的解决方案吗?我认为这是最糟糕的......

编辑:为了澄清问题的意义,需要指出完美的答案应该考虑两个问题:

  1. 根据HTML标准,元素是否可以包含文本节点?
  2. 如果元素包含一些文字,会显示吗?
  3. 显然,上一个列表的每个点都有一个子答案。

3 个答案:

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

http://jsfiddle.net/3uQjH/

答案 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

我确信它离完美不远,但是看起来很有趣。