1

我无法从 Class 属性中获取特定的文本。文本既有名称又有 ID。两者对我都很重要，但我需要将它们拆分并放置在单独的数组中。

<span class="locDescription"><b>Name1</b><br> ID1</span>
<span class="locDescription"><b>Name2</b><br>ID2</span>
<span class="locDescription"><b>Name3</b><br> ID3</span>

我的第一个想法是弹出每个元素中的最后一项（转换为字符串或列表，用“”分隔并弹出最后一项）。但是，我意识到名称和 ID 之间并不总是有空格，所以这是行不通的。

我的第二个想法是使用 OuterHTML 并<br>在<br>.

然而，这是使用 outerHTML 返回的文本的样子：

"&lt;span class=\&quot;locDescription\&quot;&gt;&lt;b&gt;Name1&lt;/b&gt;&lt;br&gt;ID1&lt;/span&gt;"

我找不到一种方法来简单地抓住<br>......这似乎是一个人可以轻松做到的事情......也许我错过了它。

取而代之的是，我尝试使用索引来获取文本：

var product_name = []
var elements = document.getElementsByClassName('locDescription');
for(var i=0; i<elements.length; i++) product_name.push(elements[i].outerHTML)

test1 = product_name[0].indexOf('&gt;&lt;b&gt;')

console.log(test1)

它以 -1 的形式返回，因此它没有解释该文本中的乱码。知道我该如何做到这一点吗？我想我现在要掉进兔子洞了。

4

3 回答 3

2

querySelector 和 childNodes

const spans = [...document.querySelectorAll(".locDescription")];
const details = spans.map(span => {
  const name = span.querySelector("b").textContent;
  const id = span.childNodes[2].nodeValue;
  return { name, id };
});
console.log(details);
<span class="locDescription"><b>Name1</b><br> ID1</span>
<span class="locDescription"><b>Name2</b><br>ID2</span>
<span class="locDescription"><b>Name3</b><br> ID3</span>

const spans = Array.from(document.querySelectorAll(".locDescription"));
const details = spans.map(function(span){
  const name = span.querySelector("b").textContent;
  const id = span.childNodes[2].nodeValue;
  return { name: name, id: id };
});
console.log(details);
<span class="locDescription"><b>Name1</b><br> ID1</span>
<span class="locDescription"><b>Name2</b><br>ID2</span>
<span class="locDescription"><b>Name3</b><br> ID3</span>

于 2020-12-03T00:29:43.430 回答
2

您可以使用Node.previousSibling的属性和.nextSibling，这些属性包括其他节点，也意味着TextNodes。

请注意，您可能想要那些您想要trim()的.textContent其他节点，因为在转义 HTML 名称代码后.textContent返回文本在 HTML 中的编写方式，这意味着包括空格和换行符（如果有）。

这是一个简单的例子：

  1. 查询<br>
  2. 使用.previousSibling/.nextSibling
  3. 得到他们的.textContent
  4. （可选）trim()返回的文本

var brElement = document.querySelector('br');

console.log(brElement.previousSibling.textContent.trim());
console.log(brElement.nextSibling.textContent.trim());
<p><b>First text</b><br>
Second text</p>

于 2020-12-03T00:40:04.160 回答
1

您可以使用正则表达式找到两个方面：

var element = document.getElementsByClassName("locDescription")[0];
var array = [];
array[0] = element.innerHTML.match(/.*(?=<br>)/)[0];
array[1] = element.innerHTML.match(/(?<=<br>).*/)[0];
console.log(array)
<span class="locDescription"><b>Name1</b><br> ID1</span>

如果要排除<b>标签：

var element = document.getElementsByClassName("locDescription")[0];
var array = [];
array[0] = element.innerHTML.match(/(?<=<b>).*(?=<\/b>)/)[0]
array[1] = element.innerHTML.match(/(?<=<br>).*/)[0];
console.log(array)
<span class="locDescription"><b>Name1</b><br> ID1</span>

于 2020-12-03T00:17:41.670 回答