使用带有 JavaScript 的离散标记检查元素是不是已关闭

Posted 2023-02-19

【中文标题】使用带有 JavaScript 的离散标记检查元素是不是已关闭

【英文标题】：Check if an element is closed using a discrete tag with JavaScript使用带有 JavaScript 的离散标记检查元素是否已关闭

【发布时间】：2014-03-29 13:30:39

【问题描述】：

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

<br />, <img />

应该返回 false 和

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

应该返回真。谢谢！

【问题讨论】：

<video> 怎么样（可以包含文本，但只能作为替代内容，以防视频失败）？ （html 中还有其他具有类似规则的元素）。

任何可以包含任何形式或方式文本的元素，

你可以检查是否el.childNodes.length > 0，但是DOM中的空元素和自闭元素一般没有区别

【参考方案1】：

使用它：

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

【参考方案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

【讨论】：

这有助于检查标签是否真的包含文本，但如果它可以包含文本则不行。还是谢谢！

【参考方案3】：

不幸的是，没有办法检测代码是如何编写标签的，因为当 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);

【讨论】：

不要使用innerText，试试appendChild(document.createTextNode(...)

我现在正在尝试，但 Firefox 允许您将任何内容附加到 <img>

替换为在 Firefox、Chrome 和 IE11 中测试的跨浏览器兼容方法。测试于jsfiddle.net/alancnet/tdBf3

尽管如此，更新后的脚本不适用于每个 html 标签，例如video,strong...！

在这一点上，我想问一下您要解决什么问题？也许有更好的方法来解决它？例如，您可以创建一个已经有答案的对象： div: true; img: false, video: false, span: true, ... ... 或者您可以使用这样的对象来增加错误的方法...

【参考方案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

【讨论】：

你检查一个标签是否真的包含html。这不是操作要求的