使用 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 返回的文本的样子:
"<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('><b>')
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 代码中编写,这意味着包括空格和换行符(如果有)。
这是一个简单的例子:
- 查询
<br>
- 使用
.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>
我无法从 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 返回的文本的样子:
"<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('><b>')
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 代码中编写,这意味着包括空格和换行符(如果有)。
这是一个简单的例子:
- 查询
<br>
- 使用
.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>