How to get all the HREF and SRC values of a code

2

Talk to people,

I need to get all the href and src values of the tags, link, a, img and script, for this I have developed the following code:

<html>

 
<script>


    $(document).ready(function() {

        function execute(){

            var conteudo = $('#insert').val();

            $('#processado').html(conteudo);

            var links = $('#processado a[href],#processado link[href],#processado script[src],#processado img[data-src]'); 
            $.each(links, function(index, item){
                var caminho =  $(item).attr('href') || $(item).attr('src') || $(item).attr('data-src') || 'Nothing';
                caminho = $(item).prop('tagName') + ":" + caminho;
                $.parseHTML($('#result').append(caminho + "<br>"));
            }); 
         }

        $('#execute').click(function(){
            execute();
        });
    });            


</script>      

<textarea id="insert" style="width:600px; height:80%;"></textarea>
<input id="execute" name="execute" type="submit" value="Execute">

<div id="processado" class="teste" style="display:none;">
</div>
<div id="result"><b>RESULTADO:</b><br>
</div>

The javascript works perfectly, however, when I copy a source code into the text-area and run the script, nothing happens.

Can anyone help me with this?

Right now, very fast.

    
asked by anonymous 07.12.2015 / 12:59

5 answers

2

Here's another tip:

$(document).ready(function() {
  function execute() {
    var conteudo = $('#insert').val();
        var buffer = $('<div/>');

    buffer.html(conteudo);
        var urls = $('[href], [src]', buffer).map(function(index, item) {
      return this.href || this.src;
    }).get();
    $('#result').html(JSON.stringify(urls));
  }
  $('#execute').click(execute);
});

jsFiddle: link

I use a temporary div buffer I import the contents of the textarea. Then I search within this div elements that have src or href attribute. Then using .map converts this element array into an array with its values, that is, its href and / or src . I use .get() to convert from jQuery object / array to a native array.

    
07.12.2015 / 18:02
1

Hello,

I made a change to your code.

$(document).ready(function() {

    function execute(){

        var conteudo = $('#insert').val();

        $('#processado').html(conteudo);

        var links = $('#hideOutput').find('a[href],link[href], script[src],img[data-src]'); 

        $.each(links, function(index, item){
            var caminho =  $(item).attr('href') || $(item).attr('src') || $(item).attr('data-src') || 'Nothing';
            caminho = $(item).prop('tagName') + ":" + caminho;
            $.parseHTML($('#result').append(caminho + "<br>"));
        }); 
     }

    $('#execute').click(function(){
        execute();
    });
    });     

And no html

<textarea id="insert" style="width:600px; height:80%;"></textarea>
<input id="execute" name="execute" type="submit" value="Execute">

<div id="processado" class="teste" style="display:none;">
</div>
<div id="result"><b>RESULTADO:</b><br>
</div>

The change consists of playing the contents of the textarea in a hidden div, then use the selectors to keep the .each, otherwise you will have to treat the string and it will get much more complex.

jsFiddler Example

See if it solves your problem.

    
07.12.2015 / 13:11
0

Follow a solution using just JavaScript:

var rawHTML = document.getElementById("rawHTML");
var btGetLinks = document.getElementById("btGetLinks");
var listLinks = document.getElementById("listLinks");

btGetLinks.addEventListener("click", function () {
  listLinks.innerHTML = "";
  var template = document.createElement("template");
  template.innerHTML = rawHTML.value;

  var elements = template.content.querySelectorAll("[src], [href], [data-src]");      
  [].forEach.call(elements, function (element, indice) {    
    var item = document.createElement("li");
    var value = element.src || element.href || element.dataset.src || "";
    item.textContent = element.tagName + ": " + value;
    listLinks.appendChild(item);
  });
});
input, textarea, div {
  box-sizing: border-box;
}

#rawHTML {
  width: 100%;
  height: 240px;
}

ul {
  list-style-type:none
}
<div>
  <textarea id="rawHTML"></textarea>
</div>
<div>
  <input id="btGetLinks" type="button" value="Pegar Links" />
</div>
<div>
  <ul id="listLinks">

  </ul>
</div>

A small note, instead of assigning your arbitrary HTML to your temporary DIV, just create a snippet with HTML.

Another point, a[href] , link[href] and script[src] should point to a valid (not necessarily existing) URL.

    
07.12.2015 / 14:04
0

Thanks for the help, but I just ran my original code and it worked. What was giving problem is that in the code I was trying to run there was the following line of code at the end.

    <script>
        ssiInit();
    </script>

After I removed this part, my script worked correctly and brought me everything I needed.

The question that now remains is, why did this block the execution of my script?

Hugs and thanks for everyone's help!

    
07.12.2015 / 15:06
0

I believe the simplest way to do this is to get all the HTML directly in the post and send it to the attribute search process, see how I solved the problem:

HTML

<h2>
  Cole o HTML:
</h2>
<textarea id="insert" style="width:600px; height:300px;"></textarea><br>
  <input type="button"  onclick="executeScript()" value="Executar">

<div id="processado" class="teste" style="display:none;">
</div>

<div id="result"></div>

jQuery

 function executeScript() {
     var content = '<div>' + $('#insert').val() + '</div>';
     var data = '';
     $(content).find('[href],[src],[data-src]')
           .each(function (index, value) {
             data += ((value.src != undefined) ? value.src : (value.href != undefined) ?  value.href : (value.dataset.src != undefined) ? value.dataset.src : null !== null) +"<br>";
           });
           if ( data.indexOf('<br>') == -1 ) {
                 data = 'Não há links para serem processados!';
           }
           $('#result').html('<h3>RESULTADO:</h3>' + data);
 }

Here's the working example

    
07.12.2015 / 20:44