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

Question

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

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

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>

结果应该 return 只有以下值（基于以上）：（基础）TwoTwoTwo (5684641230)

到目前为止，我已尝试在记事本++中使用以下正则表达式：

<div class="ui-multiselect-option-row ui-multiselect-option-row-selected"(.*?)(?=<div class="ui-multiselect-option-row")

但是不可能同时标记所有的行，去掉没有标记的。 Notepad++ 只标记了整个 selection 的第一行。所以，我在想是否有更好的方法——一个更复杂的正则表达式，可以直接解析值。所以，在行中：

a) 我要么想让上面的工作与记事本++中的另一个正则表达式行一起工作（如果它更快，我愿意使用 visualstudio）

b) 或者更简单的方法是使用 Chrome 中的控制台来解析 selected 值。我仍然希望看到正则表达式解决方案，但是对于 Chrome 控制台，我有一个

Update 1:

我用了这条线$('div.ui-multiselect-option-row-selected > div:nth-child(2)') 由于我对 Chrome 控制台导出不太熟悉，所以我需要知道的是从以下几行中获取内部 HTML：

Update 2:

for (var b in $('div.ui-multiselect-option-row-selected > div:nth-child(2)')){
    console.log($('div.ui-multiselect-option-row-selected > div:nth-child(2)')[b].innerHTML);

有效，我现在只需导出结果 }

Answer 1

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

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

这是使用有限的 HTML 样本但重复的情况下的样子。

如果您有多个多选并且没有唯一标识符，那么请计算您需要定位哪一个（注意 [1]）：

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

Answer 2

您所要做的就是使用 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-option-row-selected class.

然后我们只是用一些javascript把结果变成一个列表，然后做一个map来提取所有的innerHTML。正如你所问。

如果列表足够大，您可以考虑使用

将 [...$('div.ui-multiselect-option-row-selected > div:nth-child(2)')].map(n => n.innerHTML) 的结果存储在变量中

const e = [...$('div.ui-multiselect-option-row-selected > div:nth-child(2)')].map(n => n.innerHTML);

然后做

copy(e);

这会将列表复制到您的剪贴板中，无论您现在在哪里使用 ctrl + v - 您最终将粘贴列表。

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

Extract values from HTML when parent div contains a specific word (multi-nested divs)

html

kendo-ui

css-selectors

kendo-multiselect