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

Question

我从一个看起来像这样的页面复制“多选”列表的 HTML： 然后将HTML版本（在线美化后）粘贴到notepad++页面中。

我知道想使用正则表达式来提取该列表中启用的行。换句话说，我想看看我从该下拉列表中选择了哪些选项。有很多行，滚动并找到它们是不可能的。因此，我认为最好的方法是使用该 HTML 并搜索包含“启用”的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>

结果应仅返回以下值（基于上述）： (基础) 二二二 (5684641230)

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

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

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

a) 我要么想用 notepad++ 中的另一个正则表达式行来完成上述工作（如果这样可以更快，我愿意使用 visualstudio）

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

更新 1：

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

更新 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) - 正如我在评论中已经提到的那样，它选择所有 divs 和 ui-multiselect-option-row-selected 类的第二个直接子级。

然后我们只需使用一些 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 的任何位置 - 您最终都会粘贴该列表。