Question

我需要从DOM选择器中提取文本内容，该选择器包含传递信息，包括国家名称，我需要将其放入变量中。

我列出了可能的国家/地区：

var countries = [
    "France",
    "Denmark",
    "Finland"
];

DOM选择器：

var dom_Selector = document.querySelector("#primary > div > table.Order > tbody > tr > td > table > tbody > tr > td > table > tbody > tr:nth-child(2) > td:nth-child(1)");

以下是此td元素的HTML内容示例：

<br>Firstname Lastname<br>Street name<br>Postalcode City<br>Country<br><br>Leveres til:<br>Pickup location<br>Firstname Lastname<br>Street name<br>Postal code and city<br>Country<br>

所以挑战是选择器没有包装国家字符串;因此需要搜索选择器的全部内容。

如果匹配国家/地区，我需要返回匹配的国家/地区。

然后还有第二步，即我需要将国家/地区名称与国家/地区代码相匹配;例如法国 - ＆gt; FR，丹麦 - ＆gt; DK，芬兰 - ＆gt; FI

因此，选择器的文本内容的结果将是例如＆＃34; FI＆＃34; - 国家代码。这需要放在一个变量中。

Answer 1

document.querySelector仅返回文档中与指定选择器匹配的第一个元素。如果您想迭代可以匹配选择器的所有元素，则需要使用querySelectorAll

const selector = document.querySelectorAll('.container .country');
let countries = [];
selector.forEach((node) => {
  countries.push(node.innerText);
});

console.log(countries);

<div class="container">
  <span class="country">France</span>
  <span class="country">Spain</span>
  <span class="country">Germany</span>
</div>

Answer 2

如果我理解你想做什么，
我建议你去做那些事情：
（有关工作示例，请参阅代码段，以及代码中的注释）

＆＃13;

var countries = [
  "France",
  "Denmark",
  "Finland"
];

// Example of code only for 1 element
console.log("Result for a querySelector:");
var dom_Selector = document.querySelector("body > div.content.Delivery_TD");
// The query selector above will return only the first matching element
countries.forEach(function(val) {
  if (dom_Selector.innerHTML.includes(val)) {
    console.log(val, ": found!");
  }
});

// For multiple elements
console.log("Results for a querySelectorAll:");
var dom_Selector = document.querySelectorAll("body > div.content.Delivery_TD");
// The query selector above will return all the matching elements
dom_Selector.forEach(function(elm) {
  countries.forEach(function(val) {
    if (elm.innerHTML.includes(val)) {
      console.log(val, ": found!");
    }
  });
});

＆＃13;

body>div.content.Delivery_TD {
  border: 1px solid black;
  padding: 4px 8px;
}

＆＃13;

<body>

  <div class="content Delivery_TD">
    Delivery from France the 05/03/2018 at 09:50PM
  </div>
  <div class="content Delivery_TD">
    Delivery from Finland the 05/06/2018 at 11:50AM
  </div>
  <div class="content Delivery_TD">
    Delivery from Denmark the 05/04/2018 at 06:20PM
  </div>

</body>

＆＃13;

我希望它有所帮助！

Answer 3

使用querySelectorAll方法代替querySelector。

＆＃13;

var countries = [];

document.querySelectorAll(".content .Delivery_TD").forEach(function(itm) {
  countries.push(itm.textContent);
});

console.log(countries);

＆＃13;

<div class="content">
  <div class="Delivery_TD"> C1 </div>
  <div class="Delivery_TD"> C2 </div>
  <div class="Delivery_TD"> C3 </div>
  <div class="Delivery_TD"> C4 </div>
</div>

＆＃13;

Answer 4

<强>更新首先，你希望你的国家数组是关联的，以获得密钥的信息（FR，FN等）

像这样的东西

var countries = {
  "FR": "France", 
  "DN": "Denmark",
  "FN": "Finland" 
}

然后你可以在字符串中的国家/地区找到代码

var dom_Selector = ..... Your selector
var dom_Selector_text = dom_Selector.textContent;
// or
// var dom_Selector_text = dom_Selector.firstChild.nodeValue;

var result = "";

for (var key in countries) {
    if(dom_Selector_text.indexOf(countries[key]) !== -1){
        result = key;
  }
}

return result

搜索DOM选择器以匹配数组中的值;返回匹配值

4 个答案: