Question

由于我是javascript的新手，我需要一些帮助来弄清楚如何使用纯javascript抓取特定部分的HTML代码。

我想得到这个部分：

6LfLgwgTAAAAAFgpAIOgNmfzKi5Ko2ZnNeIE2uLR

来自以下HTML代码：

<div id="document-container">
  <div style="width: 304px; height: 78px;">
    <div>
      <iframe src="https://www.example.com/document/api2/anchor?k=6LfLgwgTAAAAAFgpAIOgNmfzKi5Ko2ZnNeIE2uLR&amp;co=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbTo0NDM.&amp;hl=en&amp;v=r20170816175713&amp;size=normal&amp;cb=xksmil4x110" title="document widget" scrolling="no" sandbox="allow-forms  allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups allow-popups-to-escape-sandbox" width="304" height="78" frameborder="0">
      </iframe>
    </div>
    <textarea id="g-document-response" name="g-document-response" class="g-document-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;  display: none; ">
    </textarea>
  </div>
</div>

我相信可以使用 document.getElementById 或 regex 来完成。我想我可以用PHP做到这一点，但我不知道如何在javascript中做到这一点。

Answer 1

为iframe提供一些独特的ID，以便使用javascript
执行document.getElementById（您给iframe的ID）
从该元素中读取src属性
解析该k参数（您可以使用某些URL构建器）

Answer 2

此代码段将获取k param的值并将其记录在控制台中。

const
    iframe = document.querySelector('iframe'),
    url = iframe.getAttribute('src'),
    regex = /k=(.*?)&/,
    regexResult = regex.exec(url);
    
console.log(regexResult[1]);

<div id="document-container"><div style="width: 304px; height: 78px;"><div><iframe src="https://www.example.com/document/api2/anchor?k=6LfLgwgTAAAAAFgpAIOgNmfzKi5Ko2ZnNeIE2uLR&amp;co=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbTo0NDM.&amp;hl=en&amp;v=r20170816175713&amp;size=normal&amp;cb=xksmil4x110" title="document widget" scrolling="no" sandbox="allow-forms  allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups allow-popups-to-escape-sandbox" width="304" height="78" frameborder="0"></iframe></div><textarea id="g-document-response" name="g-document-response" class="g-document-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;  display: none; "></textarea></div></div>

Answer 3

HTML：

$(".non-clicable",not : "hide")

AND JAVASCRIPT：

 <iframe id="myIframe" src="https://www.example.com/document/api2/anchor?k=6LfLgwgTAAAAAFgpAIOgNmfzKi5Ko2ZnNeIE2uLR&amp;co=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbTo0NDM.&amp;hl=en&amp;v=r20170816175713&amp;size=normal&amp;cb=xksmil4x110" title="document widget" scrolling="no" sandbox="allow-forms  allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups allow-popups-to-escape-sandbox" width="304" height="78" frameborder="0">
  </iframe>

此处，我为您的iframe添加了id属性，以便轻松映射。我从这个site得到了解析器。

如果这对您有用，请告诉我。顺便说一句，对不正确的缩进感到抱歉。

此处还有一个jsfiddle：https://jsfiddle.net/xx6u9vq8/1/

使用Javascript抓取部分HTML代码

3 个答案: