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

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 之间并不总是有一个 space，所以这不起作用。

我的第二个想法是使用 OuterHTML 并获取   之前的所有内容，然后对   之后的 ID 执行相同的操作。

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

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

我找不到在   之前简单地抓取的方法...这似乎很容易做到...也许我错过了它。

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

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

您可以使用正则表达式求出两侧：

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>

如果要排除  标签：

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>

Answer 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>

Answer 3

您也可以使用 Node, those properties include other nodes, meaning TextNodes 的属性 .previousSibling 和 .nextSibling。

注意您可能想要 trim() 您想要的其他节点的 .textContent，如 .textContent returns文本如何在 HTML after 转义 HTML-Name 代码中编写，这意味着包括空格和换行符（如果有）。

这是一个简单的例子：

查询  
使用.previousSibling/.nextSibling
获取他们的.textContent
（可选）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>

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

Extracting Partial Text (before the <br>) using getElementsByClassName

javascript

html

getelementsbyclassname

outerhtml