CODEWITHSUNDEEP
javascript
my name is doe fro
my name is doe fro

Reputation: 13

Javascript button to open links in new tabs

I have a request:

I have an app which turns book isbn's in to links to the book on Amazon. I'll paste in 50-100 isbns at a time and I have to click each link to view the book on Amazon and its strenuous.

Could someone help me implement a button which opens all isbn links in new tabs in the window? If I could have someone help me get a button that does this with only 1 click it would save my hand =)

Here is the Jsfiddle code: https://jsfiddle.net/ks51zch8/

<html>
<head>

</head>
<div><b>ISBN Hyperlinker</b></div>
<textarea id=numbers placeholder="paste isbn numbers as csv here" style="width:100%" rows="8" >

</textarea>
<div><b>Hyperlinked text:</b></div>
<div id="output" style="white-space: pre"></div>


<script>


//the input box.
var input = document.getElementById('numbers');
var output = document.getElementById('output')
var base = 
    'https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords='



//adding an event listener for change on the input box
input.addEventListener('input', handler, false);

//function that runs when the change event is emitted
function handler () {
  var items = input.value.split(/\b((?:[a-z0-9A-Z]\s*?){10,13})\b/gm);
  // Build DOM for output
  var container = document.createElement('span');
  items.map(function (item, index) {
    if (index % 2) { // it is the part that matches the split regex:
      var link = document.createElement('a');
      link.textContent = item.trim();
      link.setAttribute('target', '_blank');
      link.setAttribute('href', base + item);
      container.appendChild(link);
    } else { // it is the text next to the matches
      container.appendChild(document.createTextNode(item))
    }
  });
  // Replace output
  output.innerHTML = '';
  output.appendChild(container);
}
handler(); // run on load


</script>
</html>

Upvotes: 1

Views: 54

Answers (1)

Will P.
Will P.

Reputation: 8787

If you have the url as a string in javascript, pass it into window.open and it will open in a new tab. You can loop through and do it as many times as you like.

Here is your code with a couple of small modifications: an array that stores the urls, and a button that will open them all into new windows when clicked. (note: the snippit will not work because it does not allow popups)

var input = document.getElementById('numbers');
var button = document.getElementById('button');
var output = document.getElementById('output')
var base = 
    'https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords='

var urls = []
	
//adding an event listener for change on the input box
input.addEventListener('input', handler, false);
button.addEventListener('click', openAllUrls, false);

//function that runs when the change event is emitted
function handler () {
  var items = input.value.split(/\b((?:[a-z0-9A-Z]\s*?){10,13})\b/gm);
  urls=[];
  // Build DOM for output
  var container = document.createElement('span');
  items.map(function (item, index) {
    if (index % 2) { // it is the part that matches the split regex:
      var link = document.createElement('a');
      link.textContent = item.trim();
      link.setAttribute('target', '_blank');
      link.setAttribute('href', base + item);
      container.appendChild(link);
      urls.push(base + item);//add the url to our array of urls for button click
    } else { // it is the text next to the matches
      container.appendChild(document.createTextNode(item))
    }
  });
  // Replace output
  output.innerHTML = '';
  output.appendChild(container);
}
function openAllUrls(){
  for(var i=0; i< urls.length; i++){//loop through urls and open in new windows
    window.open(urls[i]);
  }
}
handler(); // run on load
<div><b>ISBN Hyperlinker</b></div> <textarea id=numbers placeholder="paste isbn numbers as csv here" style="width:100%" rows="8" >
</textarea> <div><b>Hyperlinked text:</b></div> <div id="output" style="white-space: pre"></div>
<input type="button" id="button" Value="Open All"/>

Upvotes: 1

Related Questions