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

【问题标题】：Split Javascript String into an array of strings by looking for keyword通过查找关键字将 Javascript 字符串拆分为字符串数组
【发布时间】：2016-01-11 20:29:13
【问题描述】：

处理一个个人项目，该项目解析插入到文本区域的 HTML 文档并生成一个新的 HTML 文档，并添加了修改。我的问题是，我想将某些 class="dog" 的 div 拆分为一个数组，数组中的每个元素都是狗类的 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 理念：

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"') 尝试创建一个索引数组，以便我可以使用它来拆分主字符串，但没有运气。

有什么想法可以做到这一点吗？

【问题讨论】：

为什么不在解析器中将其解析为 HTML，而是使用内置方法。
var elements = document.getElementsByClassName('dog');
我明白你的意思，但是我将 javascript 作为文本区域的输入。

标签： javascript html arrays string

【解决方案1】：

存在一个称为查询选择器的功能。有了这些，你可以选择某个类的所有元素，或者某个标签的所有元素，...

这将满足您的特定需求：querySelectorAll

常规的querySelector() 只会选择第一个元素，这就是您需要使用querySelectorAll() 的原因。它将为您提供可以继续工作的元素列表。

示例：

var dogDivs = document.querySelectorAll(".dog");

编辑： 正如您刚才提到的，它是来自 textarea 的文本，正如 an other answer 所建议的，您可以首先将其加载到您的 DOM 结构中。最好在一个隐藏的元素中，以便用户不知道它。

【讨论】：

如果我有一个不是 div 的类 "dog" 的元素怎么办？
那么列表就为空了。
我没有提到我正在通过 textarea 检索输入。

【解决方案2】：

首先您需要将内容加载到 DOM：

document.createElement("div").innerHtml(intext);

然后您可以按照其他答案的建议找到狗元素：

var elements = document.getElementsByClassName('dog');

在将用户输入的数据加载到 DOM 时要小心，这可能会为被黑客入侵打开大门。

【讨论】：

只要它严格在客户端，漏洞就不是真正的问题，对吧？
是的，我仅将其用于个人用途（将使用新类修改现有 html）。但我是通过文本区域而不是 DOM 来输入的。有没有使用纯字符串方法的类似解决方案？
@FroyT 是的，你开始这样做的方式是可能的，但这是你可以处理的最糟糕的方式。你很快就会非常痛苦。使用此解决方案，您可以执行element.className += " " + newClassName; 之类的操作，而如果您使用字符串操作来执行此操作，您将花费数小时来尝试计算字符数和解析简单元素。

【解决方案3】：

您永远不应该将 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 上找到非常有用的方法的完整列表。

【讨论】：

我没有提到我正在通过 textarea 进行输入。
将其更新为适用于 textarea。您仍然应该不惜一切代价避免手动解析。

【解决方案4】：

var elements = document.getElementsByClassName('dog'); 
var arr = [].slice.call(elements);

arr 是你想要的数组。 elements 是 HTMLCollection，没有数组原型方法。

【讨论】：

【解决方案5】：

您可以尝试使用类 dog 获取所有元素：

var dogs = document.getElementsByClassName("dog");

但这将返回所有带有类 dog 的元素。那你可以试试这个sn-p：

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"));

【讨论】：

【解决方案6】：

如果您想将其解析为文本而不将其转换为 DOM 对象，如果用户输入格式有任何错误，则可能会出错。尝试使用我在此处建议的用于搜索 XML 代码的解决方案：

https://stackoverflow.com/a/34299948/1011603

这将让您搜索开始标签，例如和结束标签，您只需调整 .substring 的大小以适应搜索开始/结束标签的大小，例如 div。

【讨论】：

【解决方案7】：

对于您正在做的事情，您不使用切片工具。这将用于字符串，您不使用索引，因为这只是在字符串中搜索特定部分。

你想要使用的是

document.querySelectorAll(".example");

您会将类 dog 放在 .example 所在的位置，格式相同。此命令将返回所有可能的 div 的数组

如果您需要更多帮助，请转到此链接 http://www.w3schools.com/jsref/met_document_queryselectorall.asp

【讨论】：