Question

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

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

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

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

根据HTML标准，元素是否可以包含文本节点？
如果元素包含一些文字，会显示吗？

显然，上一个列表的每个点都有一个子答案。

Answer 1

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元素可以有属性。“）。

Answer 2

我相信您正在寻找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/

Answer 3

我大多同意所有人的观点，黑名单是一种非常正统的做法，但如果我们真的需要测试这种能力，那么这将是我认为的一种方式（有一些 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

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

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

3 个答案: