时间戳

首页 > 解决方案 > 如何获取 DIV id 并使用文本内容

javascript - 如何获取 DIV id 并使用文本内容

问题描述

我希望我的问题不是太具体。

我想使用 JavaScript 函数（如下）来获取 HTML 页面上的所有 div。事先并不完全知道 div，因为结尾会根据行号和位置而变化。我似乎无法querySelector('[id^= ...]')使用变量，因此需要使用 elementIds。该功能应

  1. 抓取所有 DIV，
  2. 使用正则表达式匹配 ID 的开头（我知道的那部分），
  3. 制作一个数组，然后
  4. 抓住我需要的一个价值。

我获取 textContent 并对其运行操作（也不起作用）。我可能把这弄得太复杂了。

我提供了一些虚拟数据，在一定程度上对我有用，但不是全部。当我使用实时页面时，我得到了一个 HTML 集合，所以我尝试了：例如：

if (targetelements) {
  if (typeof targetelements.length === "undefined") {
    targetelements = targetelements.textContent;
  }

  targetelements = [].slice.call(targetelements).map(function(el) {
    return el.textContent;}).join(", ");
  }

  return targetelements;
}

但无济于事。

我看过的地方：

如何仅使用 javascript（无 jQuery）获取 div 标签的文本

JavaScript 匹配数组

javascript - 将字符串与正则表达式数组匹配

但我只是有一些我无法组合在一起的部分。我基本上不能处理页面，也不能对参数“子字段”执行其他操作。

我做错了什么？任何人都可以帮忙吗？请不要使用 jQuery（很遗憾）。提前致谢。

注意两件事：

  1. 实际上，我想要的 ID 也没有类名，所以我无法获取类名和 .id，并且
  2. 我的功能是由一个按钮触发的，页面上有几个 iframe。这些在下面被注释掉，但这是一个实施问题。

如果我想要一个字段，我输入例如：getfield("300", "a"). 这是我的代码：

function getfield(field, subfield) {
    //var iFrame = document.getElementById("iframe1").contentWindow.document.getElementById("iframe2");
    var i;
    var gotfield;
    //var target = "standard.textArea." + field;
    var target = new RegExp("standard.textArea." + field);
    var targetids = "";
    var targetid = "";
    var val = "";
    var targetelements = "";
         // dummy data, I turn it on, I turn if off
    var targetelements = "<div id='standard.textArea.245.Left.10'><div class='classlabel'><h2>Lorem Ipsum</h2> <p>‡a 1 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div><div id='standard.textArea.264.Left.11'><div class='classlabel'><h2>Lorem Ipsum</h2> <p>‡a 2 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div><div id='standard.textArea.300.Left.12'><div class='classlabel'><h2>Lorem Ipsum</h2> <p>‡a 3 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div><div id='standard.textArea.500.Left.13'><div class='classlabel'><h2>Lorem Ipsum</h2> <p>‡a 4 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div><div id='standard.textArea.520.Left.14'><div class='classlabel'><h2>Lorem Ipsum</h2> <p>‡a 5 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>";
    //targetelements = document.getElementsByTagName("div"); //<-- this is the live data I really will use, an html collection (inside an iframe.contentWindow)

    targetids = targetelements.match(/id='(.*?)'/g).map((val) => {
        if (val.indexOf(target) !== 1 && val.match(target)) {
            return val.replace(/id='/g, '').replace("'", '');
        }
    })
        targetid = targetids.find(el => el.match(field));

    console.log("The div I want is: " + targetid);
    if (document.getElementById(targetid)) { 
        gotfield = document.getElementById(targetid).getElementsByClassName("classlabel")[0].textContent;
        if (typeof subfield === "undefined") {
            // oh no
        }
        else {
            if (gotfield.indexOf("‡&quot; + subfield) !== -1) {
                gotfield = gotfield.split("‡&quot; + subfield + " ").pop(0).split(" ‡&quot;).shift();
            }
            else {
                return;
            }
        }
        return gotfield;
    }
    else {
        return "null"; // just so I can see
    }
}
// run a test with function 
getfield("245", "a");

标签： javascript

解决方案

尝试让 querySelector/querySelectorAll 按照@Barmar 的建议工作。

const field = "300";
const theThing = document.querySelector(`div[id^='standard.textArea.${field}']`);
console.log(theThing);
const theSubThing = theThing.querySelector('.classlabel').textContent;
console.log(theSubThing);
//etc
<div id='standard.textArea.245.Left.10'><div class='classlabel'><h2>Lorem Ipsum</h2> <p>‡a 1 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>
<div id='standard.textArea.264.Left.11'><div class='classlabel'><h2>Lorem Ipsum</h2> <p>‡a 2 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>
<div id='standard.textArea.300.Left.12'><div class='classlabel'><h2>Lorem Ipsum</h2> <p>‡a 3 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>
<div id='standard.textArea.500.Left.13'><div class='classlabel'><h2>Lorem Ipsum</h2> <p>‡a 4 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>
<div id='standard.textArea.520.Left.14'><div class='classlabel'><h2>Lorem Ipsum</h2> <p>‡a 5 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>

推荐阅读