使用 getElementsByClassName 提取部分文本(在 <br> 之前)

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

我无法从 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 并获取 <br> 之前的所有内容,然后对 <br> 之后的 ID 执行相同的操作。

但是,这是使用 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,因此它没有解释该文本中的乱码。知道我如何做到这一点吗?我想我现在正掉进兔子洞里。

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

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>

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>

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

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

这是一个简单的例子:

  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>