Get element by ID by partially matching String using JS

Get element by ID by partially matching String using JS #

Use the document.querySelector() method to get an element by id by partially matching a string, e.g. const el = document.querySelector('[id*="my-partial-id"]'). The method returns the first element within the document that matches the provided selector.

Here is the HTML for the examples in this article.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box1">Box 1</div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
// ✅ get element by ID that STARTS WITH `bo`
const element1 = document.querySelector(`[id^="bo"]`);
console.log(element1); // 👉️ div#box1

// ✅ get element by ID that ENDS WITH `ox1`
const element2 = document.querySelector(`[id$="ox1"]`);
console.log(element2); // 👉️ div#box1

// ✅ get element by ID that CONTAINS `ox`
const element3 = document.querySelector(`[id*="ox"]`);
console.log(element3); // 👉️ div#box1

// ✅ get collection of elements with ID that starts with `bo`
const elements = document.querySelectorAll(`[id^="bo"]`);
console.log(elements); // 👉️ [div#box1]

If you need a collection of elements, instead of a single element, use the querySelectorAll method instead of querySelector. The method takes the same parameter and returns a NodeList containing the matching elements.

We used the document.querySelector method to get an element by partially matching its id attribute.

The method takes one or more CSS selectors as parameters and returns the first element within the document that matches the provided selector.

If no matches are found, the method returns null.

The first example selects the first DOM element that has an id attribute, whose value starts with bo.

index.js

Copied!
// ✅ get element by ID that STARTS WITH `bo`
const element1 = document.querySelector(`[id^="bo"]`);

You might be familiar with the caret ^ symbol, which has the same meaning when used with regular expressions.

The second example selects the first DOM element that has an id attribute, whose value ends with ox1.

index.js

Copied!
// ✅ get element by ID that ENDS WITH `ox1`
const element2 = document.querySelector(`[id$="ox1"]`);

The third example selects the first DOM element that has an id attribute, whose value contains ox.

index.js

Copied!
// ✅ get element by ID that CONTAINS `ox`
const element3 = document.querySelector(`[id*="ox"]`);

The string ox could be located anywhere in the value of the id attribute for the condition to be met.

Note that you could also prefix the selector with the specific type of element you want to match, to narrow down the results.

index.js

Copied!
// ✅ get DIV element by ID that STARTS WITH `bo`
const element1 = document.querySelector(`div[id^="bo"]`);
console.log(element1); // 👉️ div#box1

The example above selects a div element that has an id attribute with a value that starts with bo.

If no element matches the provided selector, the querySelector method returns null. To make sure you dont try to access a property on a null value or try to invoke a method on one, you should handle this scenario.

index.js

Copied!
const element1 = document.querySelector(`div[id^="bo"]`);
console.log(element1); // 👉️ div#box1

// 👇️ Check if element1 stores truthy value
if (element1) {
  // 👇️ "Box 1"
  console.log(element1.textContent);
}

In the example, we checked if the element1 variable stores a truthy value before accessing the textContent property.

This helps us make sure we don't get an error by trying to access the property on a null value.

Get element by ID by partially matching String using JS

Get element by ID by partially matching String using JS #

Borislav Hadzhiev