Grab Parts of HTML code using Javascript

Question

As I'm a noobs on javascript, I need some help to figure out how to grab spesific part of html code using pure javascript.

I wanted to get this part :

6LfLgwgTAAAAAFgpAIOgNmfzKi5Ko2ZnNeIE2uLR

From HTML code below :

<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>

I do believe it can be done using document.getElementById or regex. I think i can do it using PHP, but i have no idea how to do it in javascript.

Get the `src` attribute of the `` element and apply [How to get the value from the GET parameters?](https://stackoverflow.com/q/979975/218196) — Felix Kling, Aug 24 '17 at 14:31

score 0 · Answer 1 · answered Aug 24 '17 at 14:35

0

give that iframe some unique id to easily access it with javascript
do document.getElementById(the id you gave that iframe)
read the src attribute from that element
parse that k parameter (you could use some URL builder)

answered Aug 24 '17 at 14:35

Tim

287
1
13

Hi Treibholz, sounds great idea. Could you give me the sample of code, as i don't understand javascript. Really appreciate it. – maone Aug 24 '17 at 14:37
check the answer provided by Scath ;) he was a bit faster – Tim Aug 24 '17 at 14:40

score 0 · Answer 2 · answered Aug 24 '17 at 14:35

This snippet will get the value of the k param and log it in the console.

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>

score 0 · Answer 3 · answered Aug 24 '17 at 14:59

HTML:

 <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>

AND JAVASCRIPT:

var iframeSrc = document.getElementById("myIframe").src;

var params = parseQuery(iframeSrc.replace(/^[^\?]+\??/,''));
function parseQuery ( query ) {
 var Params = new Object ();
 if ( ! query ) return Params; // return empty object
 var Pairs = query.split(/[;&]/);
 for ( var i = 0; i < Pairs.length; i++ ) {
  var KeyVal = Pairs[i].split('=');
  if ( ! KeyVal || KeyVal.length != 2 ) continue;
  var key = unescape( KeyVal[0] );
  var val = unescape( KeyVal[1] );
  val = val.replace(/\+/g, ' ');
  Params[key] = val;
  }
  return Params;
  }

  alert(params.k);

Here whereas I included id property for your Iframe to map it easily. I got the parser from this site.

Let me know if this worked for you. btw, Sorry for the improper indentions.

ALSO Here is a jsfiddle: https://jsfiddle.net/xx6u9vq8/1/

Grab Parts of HTML code using Javascript

3 Answers3