Speer Speer - 2 months ago 20
Javascript Question

Extract ISBN numbers from text

This Javascript grabs lists of ISBNs (10-13 digit numbers) from an HTML form and opens a new tab for each one, in which a search request on Amazon is launched. ISBNs entered in the form have a line break and each ISBN has its book condition described next to it.

I need the Javascript to search JUST the ISBNs and fix any formatting before launching the Amazon search, so it doesn't break the search.

With the form example below, it will need it to search these three ISBNs: 0321973615 , 0 321 973 615 (without spaces) and 0321973615. It includes spaces, extra numbers like "12-15 pages, 25%", and extra words all of which must not be searched, because they break the search.

0321973615 12-15 pages highlighted
0 321 973 615 good condition
13:0321973615 25% highlighting


Fiddle: https://jsfiddle.net/09vfmhep/1/



//the input box.
var input = document.getElementById('numbers');



//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.replace(/\s/g, '').replace(/\r?\n/g, ' ').split(' ');
length = items.length;
console.log('your collection', items);
for (var i = 0; i < length; i++) {
if ( items[i] && !isNaN(items[i]) ) {
console.log('opening page for isbn ', items[i])
openPage(items[i]);
}
}
}

//opens the tab for one isbn number
function openPage (isbn) {
var base = 'https://www.amazon.ca/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords='
window.open(base + isbn)
}

<h1>Amazon Bulk ISBN Search</h1>
<p>... note, after paste you may need to click outside the text area or tab out to fire the change event.</p>

<textarea id=numbers placeholder="paste isbn numbers as csv here">
</textarea>





How can I extract the ISBN numbers from the text, without any spacing?

Answer

You could use code:

function handler () {
    var items = input.value.match(/\b(\d\s*?){10,13}\b/gm);
    console.log('your collection', items);
    items.forEach(function (item) {
        item = item.replace(/\D+/g, '');
        console.log('opening page for isbn ', item)
        openPage(item);
    });
}

Note: it is a bad idea to open windows while the input event triggers. This gives a very bad user experience if one starts typing in the text area. Most browsers will also give a warning before opening other windows like that.

Instead you could generated hyperlinks, which open the other tabs only when the user clicks on them. Links are to example.com. Replace it with what you need.

Here is a snippet that does that:

//the input box.
var input = document.getElementById('numbers');
var output = document.getElementById('output')
var base = 
    'https://www.example.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((?:\d\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('href', base + item.replace(/\D+/g, ''));
      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
<div><b>ISBN Hyperlinker</b></div>
<textarea id=numbers placeholder="paste isbn numbers as csv here" style="width:100%">
0321973615 12-15 pages highlighted
0 321 973 615 good condition
13:0321973615 25% highlighting
</textarea>
<div><b>Hyperlinked text:</b></div>
<div id="output" style="white-space: pre"></div>

Running in frames

Some search websites will not render if they are loaded in frames. You can indicate that they should open in a new window/tab, by adding this line in the code:

      link.setAttribute('target', '_blank');

This does not work in the SO snippets, so I left it out.

Comments