Fatal编程技术网
  • html/
  • 当父div包含特定单词（多嵌套div）时，从HTML中提取值

当父div包含特定单词（多嵌套div）时，从HTML中提取值

html kendo-ui

当父div包含特定单词（多嵌套div）时，从HTML中提取值,html,kendo-ui,css-selectors,kendo-multiselect,Html,Kendo Ui,Css Selectors,Kendo Multiselect,我从如下页面复制“多选”列表的HTML： 然后将HTML版本（在线美化后）粘贴到记事本++页面中 我知道我想使用正则表达式来提取列表中启用的行。换句话说，我想看看我从下拉列表中选择了哪些选项。有很多行，滚动并找到它们是不可能的。因此，在我看来，最好的方法是使用HTML并搜索包含“enabled”的div。然后，内部的div应该具有我要查找的值 HTML如下所示： <div class="ui-multiselect-option-row" data-val

我从如下页面复制“多选”列表的HTML： 然后将HTML版本（在线美化后）粘贴到记事本++页面中

我知道我想使用正则表达式来提取列表中启用的行。换句话说，我想看看我从下拉列表中选择了哪些选项。有很多行，滚动并找到它们是不可能的。因此，在我看来，最好的方法是使用HTML并搜索包含“enabled”的
div
。然后，内部的
div
应该具有我要查找的值

HTML如下所示：

       <div class="ui-multiselect-option-row" data-value="1221221111">
      <div class="ui-multiselect-checkbox-wrapper">
         <div class="ui-multiselect-checkbox"></div>
      </div>
      <div class="ui-multiselect-option-row-text">(BASE) OneOneOne (4222512512)</div>
   </div>
   <div class="ui-multiselect-option-row ui-multiselect-option-row-selected" data-value="343333434334">
      <div class="ui-multiselect-checkbox-wrapper">
         <div class="ui-multiselect-checkbox"></div>
         <div class="ui-multiselect-checkbox-selected">✔</div>
      </div>
      <div class="ui-multiselect-option-row-text">(BASE) TwoTwoTwo (5684641230)</div>
   </div>
我现在只需要导出结果
}打开Chrome的控制台选项卡并执行以下操作：

$x('//div[contains(@class, "ui-multiselect-option-row-selected")]/div[@class="ui-multiselect-option-row-text"]/text()')
下面是使用有限的HTML示例（但重复）时的外观

如果您有多个multi-selects且没有唯一标识符，则计算您需要针对哪个标识符（请注意
[1]
）：

打开Chrome的控制台选项卡并执行以下操作：

$x('//div[contains(@class, "ui-multiselect-option-row-selected")]/div[@class="ui-multiselect-option-row-text"]/text()')
下面是使用有限的HTML示例（但重复）时的外观

如果您有多个multi-selects且没有唯一标识符，则计算您需要针对哪个标识符（请注意
[1]
）：

您所要做的就是使用css选择器，后跟一个
.map
，以获取列表中所有元素的
innerHTML

[…$（'div.ui-multiselect-option-row-selected>div:nth child（2）'））.map（n=>n.innerHTML）
css选择器是
div.ui-multiselect-option-row-selected>div:nth child（2）
——正如我在评论中提到的那样，它选择了所有
div
类中选中的
ui multiselect选项行的第二个直接子级

然后，我们只需使用一些javascript将结果转换为一个列表，并执行
map
来提取所有
innerHTML
。正如你所要求的


如果列表足够大，您可以考虑存储<代码>的结果[…$（div.ui-MultuSop-Opto-Reop-Dead > DIV:NTH子（2）'）.map（n=>n.NelHTML）< /> >使用变量


const e=[…$（'div.ui-multiselect-option-row-selected>div:nth child（2）'））.map（n=>n.innerHTML）；


然后做什么


副本（e）；



这将把列表复制到你的剪贴板中，无论你现在在哪里使用
ctrl+v
，你最终都会粘贴列表。
你所要做的就是使用css选择器，后跟一个
.map
来获取列表中所有元素的
innerHTML


[…$（'div.ui-multiselect-option-row-selected>div:nth child（2）'））.map（n=>n.innerHTML）


css选择器是
div.ui-multiselect-option-row-selected>div:nth child（2）
——正如我在评论中提到的那样，它选择了所有
div
类中选中的
ui multiselect选项行的第二个直接子级

然后，我们只需使用一些javascript将结果转换为一个列表，并执行
map
来提取所有
innerHTML
。正如你所要求的


如果列表足够大，您可以考虑存储<代码>的结果[…$（div.ui-MultuSop-Opto-Reop-Dead > DIV:NTH子（2）'）.map（n=>n.NelHTML）< /> >使用变量


const e=[…$（'div.ui-multiselect-option-row-selected>div:nth child（2）'））.map（n=>n.innerHTML）；


然后做什么


副本（e）；



这将把列表复制到你的剪贴板中，无论你现在在哪里使用
ctrl+v
，你都会粘贴列表。
你考虑过使用实际的html解析器吗？我无法分析整个页面，因为它有太多的元素。我只想把重点放在具体的下拉列表上。我正在尝试查看是否可以使用chrome控制台获取所选的值。我知道上面提到的类的名称，但是我不熟悉这个过程。或者，我可以使用Regex选项。是什么阻止html解析器只解析需要跟踪的元素？还需要显示启用了
的div的样子。理想情况下，发布一个需要跟踪的元素的最小但完整的示例。它是包含
'的父级
div
。ui multiselect选项行已选中“
，然后我要解析第二个子
div
中的文本。我认为HTML解析器将比使用控制台或正则表达式版本花费更长的时间？您考虑过使用实际的HTML解析器吗？我无法分析整个页面，因为它有太多的元素。我只想把重点放在具体的下拉列表上。我正在尝试查看是否可以使用chrome控制台获取所选的值。我知道上面提到的类的名称，但是我不熟悉这个过程。或者，我可以使用Regex选项。是什么阻止html解析器只解析需要跟踪的元素？还需要显示启用了
的div的样子。理想情况下，发布一个需要跟踪的元素的最小但完整的示例。它是包含
'的父级
div
。ui multiselect选项行已选中“
，然后我要解析第二个子
div
中的文本。我认为HTML解析器将比使用控制台或正则表达式版本花费更长的时间？这会返回多个值吗？我曾经尝试过我的版本，但它不起作用：
for（varb in$（'div.ui-multiselect-option-row-selected>div:nth child（2））{if（window.hasOwnProperty（b））console.log（b.innerHTML）；}
，它只返回第一个值。请注意，页面中还有另一个下拉列表。@Datacrawler好的，其他下拉列表有区别吗？我已经尝试过了，并且成功了。我现在需要做的就是导出这个列表：）请参见下面：
for（varb in$（'div.ui-multiselect-option-row-selected>div:nth child（2）'）{console.log（$（'div.ui-multiselect-op

$x('//div[contains(@class, "ui-multiselect-option-row-selected")]/div[@class="ui-multiselect-option-row-text"]/text()')



    $x('//div[contains(@class, "ui-multiselect-option-row-selected")][1]/div[@class="ui-multiselect-option-row-text"]/text()')