extract only sort function from code block

Question

I am using the following bookmarklet to sort textarea ascending or descending. It is working as expected. But I do not need descending sort option and there is no need of arrows like '↑' or '↓'

I am not able to extract the basic sort function from this code.

javascript: (
  function() {
    Array.from(document.querySelectorAll('textarea')).map(function(b) {
      var a = document.createElement('div');
      var d = document.createElement('button');
      d.textContent = '↑';
      d.addEventListener('click', function(f) {
        f.preventDefault();
        b.value = Array.from(new Set(b.value.split('\n'))).sort().join('\n')
      });
      var c = document.createElement('button');
      c.textContent = '↓';
      c.addEventListener('click', function(f) {
        f.preventDefault();
        b.value = Array.from(new Set(b.value.split('\n'))).sort().reverse().join('\n')
      });
      a.appendChild(d);
      a.appendChild(c);
      b.parentNode.insertBefore(a, b)
    })
  }
)();

Any help will be appreciated.

Answer 1

Most of the bookmarklet code is used to create the buttons.

• If you don't need both sort options, you can remove the 'descending' button and rename the other one to just sort.

• If you don't need any button at all, you can remove them so the bookmarklet sorts all text areas directly when clicked.

function oneButton() {
  Array.from(document.querySelectorAll('textarea')).map(function(b) {
    var a = document.createElement('div');
    var d = document.createElement('button');
    d.textContent = 'Sort';
    d.addEventListener('click', function(f) {
      f.preventDefault();
      b.value = Array.from(new Set(b.value.split('\n'))).sort().join('\n')
    });
    a.appendChild(d);
    b.parentNode.insertBefore(a, b)
  })
}
oneButton() // simulates bookmarklet click

function noButton() {
  Array.from(document.querySelectorAll('textarea')).map(function(b) {
    b.value = Array.from(new Set(b.value.split('\n'))).sort().join('\n')
  });
}

<textarea>B
A</textarea><button onclick="this.previousSibling.value='B\nA'">Reset</button><br>
<!-- noButton function is inserted, you can save this as bookmarklet -->
<a href="javascript:void Array.from(document.querySelectorAll('textarea')).map(function(b){b.value=Array.from(new Set(b.value.split('\n'))).sort().join('\n')});" onclick="void Array.from(document.querySelectorAll('textarea')).map(function(b){b.value=Array.from(new Set(b.value.split('\n'))).sort().join('\n')});" title="You can save this as bookmarklet">'Sort directly' bookmarklet</a>

Answer 2

Short answer: The sort function is sort() (MDN).

---

Details:

b.value = Array.from(new Set(b.value.split('\n'))).sort().join('\n')

This is the section responsible for sorting. Let's explain it: The code you brought in uses a set data (MDN) structure, probably to avoid duplication - but it is not always consumed. In fact you can sort an array with sort only:

[5, 2, 6, 1].sort() // [1, 2, 5, 6]

But I will explain the other parts of this code:

• Array.from - accepts the set, and turns it into an iterator - so that sort can be run on it. (See more information here)
• new Set(b.value.split('\n'))) - Creates a set-type data structure that takes an array. The array consists of b.value.split('\ n') which means the contents of the text box, with each row being an element in the array - n\ in JS is a row drop.

We now have an array of lines that were in the text box, when there are no duplicates since we used the set.

• Sort the array using sort().

Now all that remains is to connect the sorted array back to a text string, with a line drop between lines. We do this with .join('\n') which causes the array to be connected to a text string, with a line drop between members.

And now we'll go back to the beginning of the line - b.value =, which puts the processed string (after converting to an array with split, removing duplicates (set), sorting with sort, and finally connecting back to a separated string in descending rows with join) as the value of the text box. (See here on setting the value of a text box)

I hope I helped :) If something is not understood write in the comment and I will try to answer.

Links for further expansion:

• sort
• join
• set
• Array.from
• split