validacion - validar formulario javascript html5

Prueba si un elemento puede contener texto

Question

¿Existe una forma limpia y robusta en la que pueda probar (usando javascript puro o también jQuery) si un elemento HTML puede contener algo de texto?

Por ejemplo, <br> , <hr> o <tr> no pueden contener nodos de texto, mientras que <div> , <td> o <span> pueden.

La forma más sencilla de probar esta propiedad es controlar los nombres de las etiquetas. Pero, ¿es esta la mejor solución? Creo que es uno de los peores ...

EDITAR: Para aclarar el sentido de la pregunta, es necesario señalar que la respuesta perfecta debería considerar dos problemas:

1. De acuerdo con los estándares HTML, ¿el elemento puede contener un nodo de texto?
2. Si el elemento contiene algo de texto, ¿se mostrará?

Obviamente, hay una respuesta secundaria para cada punto de la lista anterior.

Answer 1

Creo que estás buscando una lista de etiquetas HTML vacías :

La siguiente es una lista completa de los elementos vacíos en HTML:

área, base, br, col, comando, inserción, hr, img, entrada, keygen, enlace, meta, param, fuente, pista, wbr

Desde allí, simplemente probaría el nodo para ver si está en la lista. Por ejemplo:

var voidNodeTags = [''AREA'', ''BASE'', ...];
var isNodeVoid = function (node) {
    return voidNodeTags.indexOf(node.nodeName) !== -1;
};

http://jsfiddle.net/3uQjH/

Answer 2

En general, estoy de acuerdo con todo el mundo en que una lista negra sería una forma muy ortodoxa de hacerlo, pero si realmente se nos exige probar la capacidad, entonces esta sería una de las formas en que pienso (con algo de 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;}
}

Lo probé en Chrome con varios nombres de etiquetas y obtuve estos resultados:

    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

También podemos probar algunas etiquetas reales usando jquery "prop" en estos dos ejemplos:

<div id="A">AAAAAA</div>
<br id="B">

Lo que da:

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

Estoy seguro de que está lejos de ser perfecto, pero fue divertido investigarlo.

Answer 3

El estándar W3 para "elementos vacíos" especifica:

Elementos vacíos
área, base, br, col, inserción, hr, img, entrada, keygen, enlace, menuitem, meta, param, fuente, pista, wbr

Y aparentemente también hay algunas etiquetas no oficiales .

Puede hacer una lista negra y usar .prop(''tagName'') para obtener el nombre de la etiqueta:

(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

Aquí también puede agregar sus propias etiquetas a cannotContainText (por ejemplo, para agregar <tr> que no es oficialmente un elemento vacío ya que no coincide con la especificación " Un elemento void es un elemento cuyo modelo de contenido nunca le permite tener contenido bajo cualquier circunstancia. Los elementos vacíos pueden tener atributos ").