Category: JavaScript Answers

To get a substring that comes after a separator with JavaScript, we can use various string methods.

We can use the JavaScript string’s lastIndexOf method to get the last instance of a separator.

Then we can use the JavaScript string’s substr method to get the substring of a string.

For instance, we can write:

const str = "xxx_456";
const strSub = str.substr(str.lastIndexOf("_") + 1);
console.log(strSub)

We have the str string that uses the _ as a separator.

Then we call str.lastIndexOf with '_' to get the index of the last instance of '_' .

Then we add 1 to it to get the substring after the '_' .

And then we call substr to get the substring from str.lastIndexOf(“_”) + 1 to the end of the string.

Therefore, strSub is '456' .

To get an element by ID and set the value with JavaScript, we can call document.getElementById with the ID string to get the element by its ID.

Then we can set the innerText property of the retrieved element if it’s not an input element.

Otherwise, we can set the value property of it.

For instance, if we have the following HTML:

<div id="theValue1"></div>  
<input id="theValue2">

Then we can set the innerText of the div by writing:

document.getElementById("theValue1").innerText = "value div";

And we can set the value of the input by writing:

document.getElementById("theValue2").value = "value input";

We call document.getElementById with the value of the id attribute of each element as a string.

Then we set the innerText property value of the div to put some text inside it.

And we set the value property of the input to set the text inside the input box.

To declare an empty two-dimensional array in JavaScript, we can create an empty array with the Array constructor.

Then we call map on that array with a callback that returns an array with the Array constructor to create the nested arrays.

For instance, we can write:

const nested = [...Array(3)].map(x => Array(5).fill(0))
console.log(nested)

We call Array with 3 to create an array with length 3.

Then we spread that into a new array to create a copy of it.

Next, we call map on the copied array with a callback that returns an array with length with all values in it set to 0 with Array(5).fill(0) .

As a result, nested is a two-dimensional array with length 3, with each nested array with length 5 and all values inside it set to 0.

If we want the nested arrays to be empty, we can omit the fill call.

To sort or order keys in JavaScript objects, we can use the Object.keys method to get the keys of the object in a string array.

Then we call sort on the array to sort the string keys.

And then we use the reduce method to reconstruct the object with the sorted keys and return it.

For instance, we can write:

const notSorted = {
  b: false,
  a: true
}
const sorted = Object.keys(notSorted)
  .sort()
  .reduce((acc, key) => ({
    ...acc,
    [key]: notSorted[key]
  }), {})
console.log(sorted)

to sort the keys of the notSorted object by alphabetical order.

Then we call Object.keys with it to get the keys in a string array.

Next, we call sort in the returned array to sort the keys.

Then we call reduce with a callback to merge the items of the acc object which has the reconstructed so far.

And we put the key with the notSorted property value of the given key as its value.

In the 2nd argument, we pass in an empty object to initialize acc to an empty object.

Therefore, sorted is:

{a: true, b: false}

To play looping audio with the HTML5 audio element and JavaScript, we can listen for the ended event and call play on the audio element in event handler for the ended event.

For instance, we can write:

const myAudio = new Audio('https://file-examples-com.github.io/uploads/2017/11/file_example_OOG_1MG.ogg');
myAudio.addEventListener('ended', () => {
  myAudio.currentTime = 0;
  myAudio.play();
});
myAudio.play();

We create the HTML audio element with the Audio constructor and the URL of the audio clip.

Then we listen to the ended event by calling addEventListener on it.

In the event handler callback, we set the currentTime back to 0 and call play to restart the same clip.

Then we call play after that to start playing the audio clip for the first time.