使用JavaScript检查元素是否关闭的方法是使用离散标记。

Question

我正在获取元素的子节点，我想检查标签是否真的可以包含文本。例如：

<br />, <img />

应返回false和

<span></span>, <div></div>, <li></li>

应该返回true。谢谢！

- Ood

---

那么 <video> 呢？（它可以包含文本，但只作为视频无法播放时的替代内容）。 （HTML 中有其他规则类似的元素）。 - Quentin

任何可以包含文本的元素都可以，包括<video>。这样做只是为了避免在向元素写入innerHTML / innerText（或任何其他需要闭合标签的函数）时出现错误。 - Ood

你可以检查 el.childNodes.length > 0，但通常在 DOM 中，空元素和自闭合元素之间没有区别。 - Bergi

Answer 1

很遗憾，在JavaScript运行时，HTML代码已经被解析为DOM对象，因此无法检测标签在代码中的编写方式。

不过，您的问题似乎更多地涉及特定元素类型是否可以包含文本。这个简单的测试将根据每个元素类型给您一个答案:

function canElementContainText(tagname) {
    try {
        var e = document.createElement(tagname);
        return e.outerHTML.indexOf("/") != -1;
    } catch (ex) {
        return false;
    }
}

例如，canElementContainText("div") 返回 true，canElementContainText("img") 返回 false。您可以将任何元素的 tagName 属性传递给此函数进行测试。

var result = canElementContainText(myElement.tagName);

- wizulus

---

不要使用innerText，尝试使用appendChild(document.createTextNode(...)。 - Zirak

我正在尝试这个，但是Firefox允许您将任何内容附加到<img>。 - wizulus

尽管如此，更新的脚本并不适用于所有HTML标签，例如 video，strong...！ - nanobash

我刚才提到脚本不能正常工作，我认为更好的方法是按照我发布的方式去做。 - nanobash

那种类型的集合的意义在于，它在动态生成的DOM中非常有用。 - nanobash

Answer 2

以下这个脚本完全正常（跨浏览器问题已解决）：

function containTxt(tag) {
    var tags = /^(img|video)$/i; // any values which will be in `tags` set will be treated as they can't have a text value
    return !tags.test(tag);
}

console.log(containTxt("img")); // returns false
console.log(containTxt("div")); // returns true

- nanobash

---

这很好，可以检查标签是否包含文本，但不能确定它是否能够包含文本。无论如何，谢谢！ - Ood

Answer 3

使用这个：

canContainText: function(node) {
    if(node.nodeType === 3){
        return true;
    }
    if(node.nodeType === 1){
        return /<[^>]+><\/[^>]+>/gi.test(document.createElement(node.nodeName.toLowerCase())).outerHTML;
    }
}

- dhomyakov

Answer 4

可以使用正则表达式：

// these are samples, get elements text using element.innerHTML;
var one = "<a href='something'>Links</a>";
var two = "Lorem ipsum dolor";

function check(str){
    return str.match(/<[a-zA-Z]+.*>(.|\n)*<\/[a-zA-Z]+>/) ? true : false;
}

console.log(check(one)); // true
console.log(check(two)); // false

- HighBoots

---

你可以检查一个标签是否实际包含HTML。但这不是OP所询问的内容。 - collapsar