我正在获取元素的子节点,我想检查标签是否真的可以包含文本。例如:
<br />, <img />
应返回false和
<span></span>, <div></div>, <li></li>
应该返回true。谢谢!
我正在获取元素的子节点,我想检查标签是否真的可以包含文本。例如:
<br />, <img />
应返回false和
<span></span>, <div></div>, <li></li>
应该返回true。谢谢!
很遗憾,在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);
appendChild(document.createTextNode(...)
。 - Zirak<img>
。 - wizulusvideo
,strong
...! - nanobash以下这个脚本完全正常(跨浏览器问题已解决):
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
canContainText: function(node) {
if(node.nodeType === 3){
return true;
}
if(node.nodeType === 1){
return /<[^>]+><\/[^>]+>/gi.test(document.createElement(node.nodeName.toLowerCase())).outerHTML;
}
}
可以使用正则表达式:
// 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
<video>
呢?(它可以包含文本,但只作为视频无法播放时的替代内容)。 (HTML 中有其他规则类似的元素)。 - Quentinel.childNodes.length > 0
,但通常在 DOM 中,空元素和自闭合元素之间没有区别。 - Bergi