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.

`Array.from(new Set(THE_TEXT.split('\n'))).sort().join('\n')` and the `.sort` is what makes the set sorted — matan h, May 02 '22 at 04:44

score 2 · Accepted Answer · answered May 07 '22 at 11:22

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>

Shlomo · Answer 2 · 2022-05-03T01:02:59.500

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:

extract only sort function from code block

2 Answers2