当父 div 包含特定单词时从 HTML 中提取值(多嵌套 divs)
Extract values from HTML when parent div contains a specific word (multi-nested divs)
我从如下页面复制了“多 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);
有效,我现在只需导出结果
}
打开 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()')
您所要做的就是使用 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
- 您最终将粘贴列表。
我从如下页面复制了“多 select”列表的 HTML:
我知道想要使用 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);
有效,我现在只需导出结果 }
打开 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()')
您所要做的就是使用 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
- 您最终将粘贴列表。