Uncategorised

How to Check if a String Contains Numbers in JavaScript

By / Last updated on September 5, 2022

To check if a string contains numbers in JavaScript, call the test() method on this regex: /\d/. test() will return true if the string contains numbers. Otherwise, it will return false.

For example:

function containsNumbers(str) {
  return /\d/.test(str);
}

console.log(containsNumbers('hello123')); // true
console.log(containsNumbers('javascript')); // false
console.log(containsNumbers('3 apples')); // true

The RegExp test() method searches for a match between a regular expression and a string.

The / and / characters are used to start and end the regular expression.

The \d metacharacter matches any digit (0 – 9) in the string.

You can also use the [0-9] to match digits. This pattern matches any number character between 0 and 9.

function containsNumbers(str) {
  return /[0-9]/.test(str);
}

console.log(containsNumbers('hello123')); // true
console.log(containsNumbers('javascript')); // false
console.log(containsNumbers('3 apples')); // true

You might find [0-9] to be more readable than using \d, especially if you’re not very familiar with special characters in regular expressions.

Check if string contains only numbers

To check if the string contains only numbers, we’ll have to use a different regular expression – ^\d+$:

function containsOnlyNumbers(str) {
  return /^\d+$/.test(str);
}

console.log(containsOnlyNumbers('hello123')); // false
console.log(containsOnlyNumbers('3453')); // true
console.log(containsOnlyNumbers('3 apples')); // false

The ^ character marks the beginning of the string input, and the $ character marks the end of it.

Adding the + character after the \d makes regex match one or more occurrences of the \d pattern.

So the regex matches a string starting and ending with a consecutive sequence of digits.

As we did before, we could replace \d with [0-9] here:

function containsOnlyNumbers(str) {
  return /^[0-9]+$/.test(str);
}

console.log(containsOnlyNumbers('hello123')); // false
console.log(containsOnlyNumbers('3453')); // true
console.log(containsOnlyNumbers('3 apples')); // false

The String match() method

We can use the String match() method in place of RegExp test() to check if a string contains numbers

function containsNumbers(str) {
  return Boolean(str.match(/\d/));
}

console.log(containsNumbers('hello123')); // true
console.log(containsNumbers('javascript')); // false
console.log(containsNumbers('3 apples')); // true

The String match() method returns an array of all the matches of a regular expression in a string. If there are no matches, it returns null.

function containsNumbers(str) {
  return str.match(/\d/);
}

console.log(containsNumbers('hello123'));
// [ '1', index: 5, input: 'hello123', groups: undefined ]

console.log(containsNumbers('javascript')); // null

console.log(containsNumbers('3 apples'));
// [ '3', index: 0, input: '3 apples', groups: undefined ]

We pass the result of match() to the Boolean() constructor to convert it to a Boolean value. Boolean() converts truthy values to true, and falsy values to false.

In JavaScript, there are six falsy values: undefined, null, NaN, 0, '' (empty string), and false. Every other value is truthy.

console.log(Boolean(undefined)); // false
console.log(Boolean(['number60'])); // true
console.log(Boolean(null)); // false
console.log(Boolean(5)); // true

How to Use a Button as a Link in Vue

By / Last updated on September 2, 2022

To use a button as a link in Vue, you can wrap the button in an anchor (<a>) element. Clicking a link button makes the browser navigate to the specified URL.

<template>
  <div>
    <a href="/posts">
      <button>Posts</button>
    </a>
  </div>
</template>
Clicking the link button to navigate to another page.
Clicking the link button to navigate to another page.

When working with Vue Router, you can make a button serve as a router link using the navigate function provided by the router-link default slot.

<template>
  <div>
    <router-link
      to="/posts"
      custom
      v-slot="{ navigate }"
    >
      <button
        @click="navigate"
        role="link"
      >
        Posts
      </button>
    </router-link>
  </div>
</template>
Navigating to the "/posts" route without refreshing the page.
Navigating to the /posts route without refreshing the page.

We use navigate as a handler for the click event, so it is called when the button is clicked, making the browser navigate to the specified route without refreshing the page.

The above method only works for Vue 3.x though. If working with Vue 2.x, you can use a button as a router link by setting the tag prop to the name of the button component, and setting the to prop to the specific route.

<template>
  <div>
    <router-link to="/posts" tag="button">Posts</router-link>
  </div>
</template>

The $router.push() method

Alternatively, we can use a button as a Vue router link by calling the push() method on the $router variable made available by Vue Router.

<template>
  <div>
    <button @click="$router.push('/posts')">Posts</button>
  </div>
</template>

The $router variable represents the router instance, and can be used for programmatic navigation.

When working with the Vuetify framework, we can use the button component as a link by setting the v-btn href prop.

<template>
  <div>
    <v-btn
      href="/posts"
      color="primary"
      dark
    >
      Posts
    </v-btn>
  </div>
</template>

When using Vue Router with Vuetify, we can use the button component as a router link by setting the v-btn to prop.

<template>
  <div>
    <v-btn
      to="/posts"
      color="primary"
      dark
    >
      Posts
    </v-btn>
  </div>
</template>

If you’re working with the Vue Bootstrap framework, you can use the href to turn the button component into a link.

<template>
  <div>
    <b-button
      href="/posts"
      variant="primary"
    >
      Posts
    </b-button>
  </div>
</template>

We can set the b-button to prop to use the Vue Bootstrap button component as a Vue Router link.

<template>
  <div>
    <b-button
      to="/posts"
      variant="success"
    >
      Posts
    </b-button>
  </div>
</template>

How to Add an Element to an Array in Vue

By / Last updated on August 31, 2022

Add Element to Array With push() Method

To add an element to an array in Vue, call the push() method in the array with the element as an argument. The push() method will add the element to the end of the array.

For example:

<template>
  <div id="app">
    <button @click="addFruit">Add fruit</button>
    <ul>
      <h2
        v-for="(fruit, i) in fruits"
        :key="i"
      >
        {{ fruit }}
      </h2>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['Orange', 'Apple'],
    };
  },
  methods: {
    addFruit() {
      this.fruits.push('Banana');
    },
  },
};
</script>
Clicking the button adds a new fruit element.
Clicking the button adds a new fruit element.

The Array push() method adds one or more elements to the end of an array and returns the length of the array.

We use the v-for Vue directive to display the elements in the array. These rendered elements are automatically updated in the view when the array is modified with push().

Add Object Element to Array in Vue

We can use the same approach to add an object to an array and display more complex data. We just have to make sure that we render the properties of each object in the array, not the object itself.

<template>
  <div id="app">
    <button @click="addFruit">Add fruit</button>
    <ul>
      <h2
        v-for="(fruit, i) in fruits"
        :key="i"
      >
        <!-- Render "name" and "amount" properties -->
        {{ fruit.name }} ({{ fruit.amount }})
      </h2>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        { name: 'Orange', amount: 3 },
        { name: 'Apple', amount: 5 },
      ],
    };
  },
  methods: {
    addFruit() {
      // Add object element to array
      this.fruits.push({ name: 'Banana', amount: 4 });
    },
  },
};
</script>
Clicking the button adds a new fruit item with a certain amount.
Clicking the button adds a new fruit element with a certain amount.

Like before, the list automatically updates in the view when a new object element is added to the array.