2

I am tasked with a little coding challenge that I can't seem to work out. Its meant to be done in javascript, a language I have touched in years... Basically the task is to read a local file , which has sentences on each line. Some of the sentences are palindromes- and the goal is to output only the sentences that are palindromes. I have tried playing around in JSFiddle with the following code. But, my functionality isn't working.

HTML:

<input type="file" name="file" id="file">

Javascript:

window.addEventListener('load', function() {
    document.getElementById("myBtn").addEventListener("click", function() {

      var reader = new FileReader();
      reader.addEventListener('load', function() {
        document.getElementById('file').innerText = this.result;
      });
      reader.readAsText(document.querySelector('input').files[0]);
    });
}, true);
console.log(reader);

I found some code online for checking palindromes, but its for a user inputted sentence. I'm struggling to comprehend how to utilize this logic to apply to the lines from my inputted file.

function palindrome(str) {
var re = /[\W_]/g;
var lowRegStr = str.toLowerCase().replace(re, '');
var reverseStr = lowRegStr.split('').reverse().join(''); 
return reverseStr === lowRegStr;
}
palindrome("A man, a plan, a canal. Panama");

Any ideas or advice? Thanks!

sparks
  • 49
  • 5

1 Answers1

3

This is a quick solution for the boilerplate code that you got: Sample file contents:

A man, a plan, a canal. Panama
something else
another line


window.addEventListener('load', function() {
    document.getElementById("myBtn").addEventListener("click", function() {

      var reader = new FileReader();
      reader.addEventListener('load', function() {
        //document.getElementById('file').innerText = this.result;
        const strings = this.result.split(/\r?\n/);
        const palindromes = strings.filter((line) => {
          return palindrome(line);
        });
        console.log('initial lines:', strings);
        console.log('palindromes only:', palindromes);
      });
      reader.readAsText(document.querySelector('input').files[0]);
    });
}, true);
//console.log(reader);

function palindrome(str) {
  if (str === '') return false;
  var re = /[\W_]/g;
  var lowRegStr = str.toLowerCase().replace(re, '');
  var reverseStr = lowRegStr.split('').reverse().join(''); 
  return reverseStr === lowRegStr;
}
<input type="file" name="file" id="file">
<button id="myBtn">Start</button>
farhodius
  • 510
  • 3
  • 8
  • 1
    Yeah this is because of the line break symbol which is different from Mac to PC. Updated code to user regex instead. Try now. Also added an empty string check to account for empty lines in the file. – farhodius Jan 20 '21 at 15:33
  • quick question- could you explain what exactly the `const palindromes = strings.filter((line) => {return palindrome(line););` and `reader.readAsText(document.querySelector('input').files[0]);` are doing and why they are necessary? trying to wrap my head around it. thanks! – sparks Jan 26 '21 at 05:19
  • 1
    Long story short: `reader.readAsText();` reads selected file and when done reading `reader` object emits the `load` event. `load` event listener function gets content of the file as one long string. Listener function then breaks the string into array of multiple strings by line (using line break). `filter` method of Array prototype then loops through each item and passes it to the `palindrome` function which returns either true or false. If `true` item from the strings array gets added to the new `palindromes` array, if `false` it gets dropped. – farhodius Jan 26 '21 at 07:49
  • got it! thanks for the great explanation. @farhodius – sparks Jan 26 '21 at 13:52