Author: John Au-Yeung

Sometimes, we want to replace all the dots in a number with JavaScript.

In this article, we’ll look at how to replace all the dots in a number with JavaScript.

How to replace all the dots in a number with JavaScript?

To replace all the dots in a number with JavaScript, we can use the string replace method.

For instance, we write:

const value = '8.30'
const newValue = value.replace(/\./g, 'x');
console.log(newValue)

to call replace with a regex that matches all dots in the value string.

And we replace them all with 'x'.

Therefore, newValue is '8x30'.

Conclusion

To replace all the dots in a number with JavaScript, we can use the string replace method.

Sometimes, we want to copy some properties from an object in JavaScript.

In this article, we’ll look at how to copy some properties from an object in JavaScript.

How to copy some properties from an object in JavaScript?

To copy some properties from an object in JavaScript, we can use the destructuring syntax.

For instance, we write:

const user = {
  id: 123,
  firstName: 'John',
  lastName: 'Smith'
};
const {
  id,
  ...newUser
} = user;
console.log(newUser);

to get all properties from user except id and assign that to newUser with the destructuring syntax.

The ... operator returns an object with all the properties except for the ones that has already been destructured.

Therefore, newUser is {firstName: 'John', lastName: 'Smith'}.

Conclusion

To copy some properties from an object in JavaScript, we can use the destructuring syntax.

Sometimes, we want to add a new key value pair in existing JSON object using JavaScript.

In this article, we’ll look at how to add a new key value pair in existing JSON object using JavaScript.

How to add a new key value pair in existing JSON object using JavaScript?

To add a new key value pair in existing JSON object using JavaScript, we can parse the JSON string with JSON.parse, then add the key-value pairs we want, and then convert the object back to a JSON string with JSON.stringify.

For instance, we write:

const s = `{
  "workbookInformation": {
    "version": "9.1",
    "source-platform": "win"
  },
  "datasources1": {

  },
  "datasources2": {

  }
}`
const obj = JSON.parse(s)
obj.foo = 'bar'
const newS = JSON.stringify(obj)
console.log(newS)

to parse s into an object with JSON.parse.

Then add the foo property to obj.

And then we call JSON.stringify with obj to convert it back to a JSON string.

Therefore, newS is {"workbookInformation":{"version":"9.1","source-platform":"win"},"datasources1":{},"datasources2":{},"foo":"bar"}.

Conclusion

To add a new key value pair in existing JSON object using JavaScript, we can parse the JSON string with JSON.parse, then add the key-value pairs we want, and then convert the object back to a JSON string with JSON.stringify.

Sometimes, we want to erase previously drawn lines on an HTML5 canvas with JavaScript.

In this article, we’ll look at how to erase previously drawn lines on an HTML5 canvas with JavaScript.

How to erase previously drawn lines on an HTML5 canvas with JavaScript?

To erase previously drawn lines on an HTML5 canvas with JavaScript, we can overwrite the previous shape with a new image.

For instance, we write:

<canvas width='200' height='200'></canvas>

to add a canvas.

And we write:

const canvas = document.querySelector('canvas')
const context = canvas.getContext('2d');

context.fillStyle = 'blue';
context.fillRect(0, 0, 100, 100);
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

context.fillStyle = 'red';
context.fillRect(50, 50, 100, 100);

setTimeout(() => {
  context.putImageData(imageData, 0, 0);
}, 1000);

to draw rectangles on the canvas with fillRect.

We use the getImageData to get the canvas content before the red rectangle is drawn.

Then after we draw the red rectangle, we call putImageData with imageData to overwrite the blue and red rectangles with the canvas content that only has the blue rectangle.

Therefore, we see the blue and red rectangle drawn for a second, then we see the blue rectangle only thereafter.

Conclusion

To erase previously drawn lines on an HTML5 canvas with JavaScript, we can overwrite the previous shape with a new image.

Sometimes, we want to make a span element editable with JavaScript.

In this article, we’ll look at how to make a span element editable with JavaScript.

How to make a span element editable with JavaScript?

To make a span element editable with JavaScript, we can set the contentEditable property of the span to true.

For instance, we write:

<span>hello world</span>
<button>
  edit
</button>

to add a span and a button.

Then we write:

const button = document.querySelector('button')
const span = document.querySelector('span')

button.onclick = () => {
  span.contentEditable = true
}

to make the span editable when we click on the button.

To do this, we select the span and button with querySelector.

Then we set button.onclick to a function that sets span.contentEditable to true.

As a result, when we click edit, then we can change the span’s text by typing in it.

Conclusion

To make a span element editable with JavaScript, we can set the contentEditable property of the span to true.