处理个人项目,该项目解析插入到textarea中的HTML文档并生成带有附加修改的新HTML文档。 我的问题是什么,我希望用class =" dog"分割某些div。进入一个数组,数组中的每个元素都是dog类的div。
HTML:
<div class="dog">
<div class="mouth"></div>
<dig class="legs"></dig>
</div>
<div class="dog">
<div class="mouth"></div>
<dig class="legs"></dig>
</div>
JS Idea:
dogs[x] = intext.slice(intext.indexOf('<div class="dog"'), /*next instance of dog*/);
数组看起来像:
dog[0] = <div class="dog">
<div class="mouth"></div>
<dig class="legs"></dig>
</div>
我尝试使用.indexOf('<div class="dog"')
尝试创建索引数组,以便我可以使用它来拆分主字符串但没有运气。
关于如何实现这一目标的任何想法?
答案 0 :(得分:3)
存在一个名为查询选择器的功能。通过这些,您可以选择具有特定类别的所有元素,或某个标记的所有元素,......
这符合您的特定需求:querySelectorAll
常规querySelector()
只会选择第一个元素,这就是您需要使用querySelectorAll()
的原因。它将为您提供一个可以继续使用的元素列表。
示例:强>
var dogDivs = document.querySelectorAll(".dog");
修改强> 正如您刚刚提到的那样,它是来自textarea的文本,如an other answer所示,您可以先将其加载到DOM结构中。最好是隐藏元素,以便用户不知道它。
答案 1 :(得分:1)
你永远不应该将html解析为字符串。使用DOMParser
将其转换为文档,然后您可以使用所有标准方法
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingHTMLSource, "Text Area Content");
divs = doc.getElementsBYTagName("div");
然后您可以使用内置的Document
界面。对于您的具体情况,您可以使用以下几种方法。
获取所有div的数组:
document.getElementsByTagName("div");
获取具有特定类的所有div的数组:
document.getElementsByClassName("dog");
获取具有特定ID的所有div的数组:
document.getElementById("id");
可以在MDN上找到非常有用的方法的完整列表。
答案 2 :(得分:1)
首先,您需要将内容加载到DOM:
document.createElement("div").innerHtml(intext);
然后你可以找到其他答案所暗示的狗元素:
var elements = document.getElementsByClassName('dog');
将用户输入的数据加载到DOM时要小心,这可能会打开被黑客入侵的大门。
答案 3 :(得分:0)
var elements = document.getElementsByClassName('dog');
var arr = [].slice.call(elements);
arr是你想拥有的数组。元素是HTMLCollection,没有数组原型方法。
答案 4 :(得分:0)
您可以尝试使用class dog获取所有元素:
var dogs = document.getElementsByClassName("dog");
但这将返回所有带有类狗的元素。然后你可以尝试这个片段:
function splitByClass(tag, cl) {
var els = document.getElementsByClassName(cl);
var res = [];
for (i = 0; i < els.length; i++) {
if (els[i].tagName.toLowerCase() == tag.toLowerCase()) {
res.push(els[i]);
}
}
return res;
}
console.log(splitByClass("div","dog"));
答案 5 :(得分:0)
如果要将其解析为文本而不将其转换为DOM对象,如果用户输入格式存在任何错误,则可能会出错。尝试像我在这里建议搜索XML代码的解决方案:
https://stackoverflow.com/a/34299948/1011603
这将允许您搜索开始标记,例如结束标记,您只需要根据搜索开始/结束标记的大小调整.substring大小,例如div。
答案 6 :(得分:-1)
对于你正在做的事情,你不要使用切片工具。这将用于一个字符串,你不会使用索引,因为它只是在字符串中搜索特定的部分。
您想要使用的是
document.querySelectorAll(".example");
您将把类狗放在.example的格式相同的位置。 此命令将返回所有可能div的数组
如果您需要更多帮助,请转到此链接 http://www.w3schools.com/jsref/met_document_queryselectorall.asp