Question

大家好我有问题我正在创建一个谷歌浏览器扩展程序，可以从网站上删除一些信息并将它们保存在txt文件中。

问题在于我想要将一个靠近跨度ID的innerhtml数据exctract这是我需要能够exctract的代码：

        <tr class="gridRow_even">
        <td class="fieldLabel_150">
            Date
        </td>
        <td>


            <span id="123"></span>
            12/20

        </td>
    </tr>

我要保存的是txt上的12/20通常我会按ID获取元素，但在这种情况下我不知道如何获取它我尝试使用jquery这样做：

var DT = $（“td：contains（/）”）

但它给了我对象对象当我尝试保存为txt数据exctracted。我不知道如何做到这一点我疯了请求帮助!!!

Answer 1

const text = Array.prototype.filter.call(document.querySelectorAll('td'), el => el.querySelector('span#a123'))[0].innerText;
console.log(text);

<table>
  <tr class="gridRow_even">
    <td class="fieldLabel_150">Date</td>
    <td>
      <span id="a123"></span>
      12/20
    </td>
  </tr>
</table>

在解释之前，有两个关于这个例子的快速说明：

document.querySelector('td')似乎不起作用，除非它在适当的表格中。可能你的真实例子是<table>，所以这是一个有争议的问题。如果不是，你需要提出一种稍微不同的找到它的方法（这可能是另一个答案的主题）。
123不是有效的ID。 id必须以字母开头。同样，你真正的目标可能被命名为罚款。如果确实以数字开头，请改用el.querySelector('span[id=123]')。

至于代码，基本上使用document.querySelectorAll('td')来获取所有td元素（如果它们在特定的表中，也可以使用它，如'#tableId td'）。< / p>

然后，我使用Array.prototype.filter()过滤所有td元素，查找包含我们想要查找的范围的任何元素。不得不使用Array.prototype.filter.call()，因为document.querySelectorAll()的结果实际上是NodeList，它类似于数组，但不是实际的数组。

一旦我过滤了，我就会从过滤器中获取第一个元素并获得它innerText。

如果页面中可能有多个td span，请使用.map(el => el.innerText)代替[0].innerText来创建所有值的数组

另一种方法是找到所有<span>元素，然后遍历并获取每个parentNode元素。这需要<span>是<td>的直接子项，因此可能不太灵活，具体取决于您的实际用例。

const text = Array.prototype.map.call(document.querySelectorAll('span#a123'), el => el.parentNode)[0].innerText;
console.log(text);

<table>
  <tr class="gridRow_even">
    <td class="fieldLabel_150">Date</td>
    <td>
      <span id="a123"></span>
      12/20
    </td>
  </tr>
</table>

如果你确定它只会是一个跨度，你可以改用：

const text = document.querySelector('span#a123').parentNode.innerText;
console.log(text);

<table>
  <tr class="gridRow_even">
    <td class="fieldLabel_150">Date</td>
    <td>
      <span id="a123"></span>
      12/20
    </td>
  </tr>
</table>

Answer 2

这是获得预期输出的方式

$("span#123").parent().text();

简单的Javascript

document.getElementById("123").parentNode.innerText;

Answer 3

使用Javascript：

var desired_innerHTML = document.getElementById('123').parentElement.innerHTML;

的jQuery

var desired_innerHTML = $('#123').parent().html();

Answer 4

12/20 是一个文本节点。您可以按.contents()过滤.nodeType的结果。

adb shell am instrument

var DT = $("td:contains(/)").contents().filter(function(idx, ele) {
    return ele.nodeType == Node.TEXT_NODE && ele.textContent.trim().length != 0;
});
console.log('Txt: ' + DT.text().trim())

如何让innerhtml接近跨度id javascript

4 个答案: