通过查找关键字将Javascript String拆分为字符串数组

时间:2016-01-11 20:29:14

标签: javascript html arrays string

处理个人项目,该项目解析插入到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"')尝试创建索引数组,以便我可以使用它来拆分主字符串但没有运气。

关于如何实现这一目标的任何想法?

7 个答案:

答案 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