使用 getElementsByClassName 提取部分文本（在 <br> 之前）

Question

我无法从 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> 之后的 ID 执行相同操作。

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

"<span class=\"locDescription\"><b>Name1</b><br>ID1</span>"

我找不到在<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，因此它没有解释该文本中的乱码。知道我该如何做到这一点吗？我想我现在要掉进兔子洞了。

Answer 1

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>

Answer 2

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

注意你可能想要trim().textContent你想要的那些其他节点，因为.textContent返回文本是如何写在你的HTML之后 em> 转义 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>

Answer 3

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

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>