use wildcard to find specific ID using javaScript

Question

I want to run a script where I can specifically select ID tag where parameters are
_string_n_n
where '_string' = release (in this case) and 'n' = are numbers #
e.g. _release_8_3

Here's my code... where I wan to run the script and get content of tag where ID matches _string_n_n

<div class="sect2">
      <h3 id="_release_8_3">Release 8.3</h3>
      <div class="sect3">
        <h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest">QA TEST release 1.2.4 (to take a look at manifest)</h4>
        <div class="ulist">
          <ul>
            <li>
              <p><a href="release-manifest-1.2.4.html">Release Manifest</a></p>
            </li>
          </ul>
        </div>
      </div>
      <div class="sect3">
        <h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest">QA TEST release 1.2.3 (to take a look at manifest)</h4>
        <div class="ulist">
          <ul>
            <li>
              <p><a href="release-manifest-1.2.3.html">Release Manifest</a></p>
            </li>
          </ul>
        </div>
      </div>
      <div class="sect3">
        <h4 id="_qa_release_8_3_1">QA release 8.3.1</h4>
        <div class="ulist">
          <ul>
            <li>
              <p><a href="release-manifest-8.2.6.html">Release Manifest</a></p>
            </li>
            <li>
              <p>Bugs <a href="link">fixed in this release</a></p>
            </li>
            <li>
              <p>Package updates:</p>
              <div class="literalblock">
                <div class="content">
                  <pre>user-portal 8.2</pre>
                </div>
              </div>
            </li>
            <li>
              <p>Database migration scripts to run:</p>
              <div class="literalblock">
                <div class="content">
                  <pre>none</pre>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="sect2">
      <h3 id="_release_8_2">Release 8.2</h3>
      <div class="sect3">
        <h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest_2">QA TEST release 1.2.4 (to take a look at manifest)</h4>
        <div class="ulist">
          <ul>
            <li>
              <p><a href="release-manifest-1.2.4.html">Release Manifest</a></p>
            </li>
          </ul>
        </div>
      </div>
      <div class="sect3">
        <h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest_2">QA TEST release 1.2.3 (to take a look at manifest)</h4>
        <div class="ulist">
          <ul>
            <li>
              <p><a href="release-manifest-1.2.3.html">Release Manifest</a></p>
            </li>
          </ul>
        </div>
      </div>
      <div class="sect3">
        <h4 id="_qa_release_8_2_6">QA release 8.2.6</h4>
        <div class="ulist">
          <ul>
            <li>
              <p><a href="release-manifest-8.2.6.html">Release Manifest</a></p>
            </li>
            <li>
              <p>Bugs <a href="link">fixed in this release</a></p>
            </li>
            <li>
              <p>Package updates:</p>
              <div class="literalblock">
                <div class="content">
                  <pre>user-portal 8.2</pre>
                </div>
              </div>
            </li>
            <li>
              <p>Database migration scripts to run:</p>
              <div class="literalblock">
                <div class="content">
                  <pre>none</pre>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

So do it? I mean, you can create a selector string from other strings. What about this confuses you? — Taplar, May 24 '17 at 15:26
This appears to have already been answered in the question [Select div using wildcard ID](https://stackoverflow.com/a/1938300/7427606) — Chris Tyler, May 24 '17 at 15:29
@ChrisTyler this question appears to be about selecting a div using *multiple* wildcards, but that answer could be adapted using `.filter` — freedomn-m, May 24 '17 at 15:30

Jeff Noel · Answer 1 · 2022-08-24T11:52:51.360

Select all elements with an ID containing the following string (in this case _release_:

document.querySelectorAll("[id*='_release_']");

In jQuery: $("[id*='_release_']")

Here are more wildcards if you need a different reaction.

console.dir(document.querySelectorAll("[id*='_release_']"))

<div class="sect2">
  <h3 id="_release_8_3">Release 8.3</h3>
  <div class="sect3">
    <h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest">QA TEST release 1.2.4 (to take a look at manifest)</h4>
    <div class="ulist">
      <ul>
        <li>
          <p><a href="release-manifest-1.2.4.html">Release Manifest</a></p>
        </li>
      </ul>
    </div>
  </div>
  <div class="sect3">
    <h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest">QA TEST release 1.2.3 (to take a look at manifest)</h4>
    <div class="ulist">
      <ul>
        <li>
          <p><a href="release-manifest-1.2.3.html">Release Manifest</a></p>
        </li>
      </ul>
    </div>
  </div>
  <div class="sect3">
    <h4 id="_qa_release_8_3_1">QA release 8.3.1</h4>
    <div class="ulist">
      <ul>
        <li>
          <p><a href="release-manifest-8.2.6.html">Release Manifest</a></p>
        </li>
        <li>
          <p>Bugs <a href="link">fixed in this release</a></p>
        </li>
        <li>
          <p>Package updates:</p>
          <div class="literalblock">
            <div class="content">
              <pre>user-portal 8.2</pre>
            </div>
          </div>
        </li>
        <li>
          <p>Database migration scripts to run:</p>
          <div class="literalblock">
            <div class="content">
              <pre>none</pre>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="sect2">
  <h3 id="_release_8_2">Release 8.2</h3>
  <div class="sect3">
    <h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest_2">QA TEST release 1.2.4 (to take a look at manifest)</h4>
    <div class="ulist">
      <ul>
        <li>
          <p><a href="release-manifest-1.2.4.html">Release Manifest</a></p>
        </li>
      </ul>
    </div>
  </div>
  <div class="sect3">
    <h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest_2">QA TEST release 1.2.3 (to take a look at manifest)</h4>
    <div class="ulist">
      <ul>
        <li>
          <p><a href="release-manifest-1.2.3.html">Release Manifest</a></p>
        </li>
      </ul>
    </div>
  </div>
  <div class="sect3">
    <h4 id="_qa_release_8_2_6">QA release 8.2.6</h4>
    <div class="ulist">
      <ul>
        <li>
          <p><a href="release-manifest-8.2.6.html">Release Manifest</a></p>
        </li>
        <li>
          <p>Bugs <a href="link">fixed in this release</a></p>
        </li>
        <li>
          <p>Package updates:</p>
          <div class="literalblock">
            <div class="content">
              <pre>user-portal 8.2</pre>
            </div>
          </div>
        </li>
        <li>
          <p>Database migration scripts to run:</p>
          <div class="literalblock">
            <div class="content">
              <pre>none</pre>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

If you are going to do this, consider instead using a class for better performance. — Taplar, May 24 '17 at 15:28
Taplar is right, it would also be less of a headache for the next developer that might fall upon your code if you use a class. — Jeff Noel, May 24 '17 at 15:28
that will also include _release_8_3_4 <-- i don't want that.... just 2 number e.g. _release_8_3 — Digvijay, May 24 '17 at 15:29
You can always filter those out... `$("[id$='_release_8_3']")` will get all the elements ending with the string, instead of simply containing the string. — Jeff Noel, May 24 '17 at 15:33
Since the question aske for "get content of tag" if your are using jQuery don't forget to add the call to the text() function. — Muffun, May 24 '17 at 15:38
@Muffun You'd actualy need to loop through all the matching nodes found by the query, since `.innerHTML` and `.text()` will just concatenate all the contents of the elements together (see [this demo](https://jsfiddle.net/bq227dhL/)). — Jeff Noel, May 24 '17 at 17:48
It does work. I have edited my answer and added a code snippet that can be ran. You can see all the selectors found in the console output when running the snippet. — Jeff Noel, Aug 24 '22 at 11:53

Taplar · Answer 2 · 2017-05-24T15:49:03.623

1

e.g. _release_8_3

var string = 'release';
var number1 = 8;
var number2 = 3;
var selector = '#_'+ [ string, number1, number2 ].join( '_' );

var element = $(selector);
    element = document.querySelector(selector);
    element = document.getElementById('_'+ [ string, number1, number2 ].join( '_' ) );

Have you tried any of these?

If instead you are wanting to find all ids that match a pattern, use a class instead. You can do pattern matching in lookups, however it is less performant and javascript will have to examine every single element in the dom to see if it matches your attribute pattern. Instead by giving like patterned id elements the same class, you can perform a class lookup which, along with id and tagName lookups, are some of the fastest lookups your browser can perform.

Otherwise if you feel you absolutely must do this, I would instead try to steer you towards using one of the more efficient selectors, and then using filter to find what you want. For instance in your example it looks like the pattern you gave is associated with h3 elements, so you could do.

$('h3').filter(function(){
    return /^[_]release[_][0-9]+[_][0-9]+$/.test(this.id);
});

Provided I got my regex right, this would find all the h3 elements and then filter to return only those that match the pattern _release_#_# where # is any number

edited May 24 '17 at 15:49

answered May 24 '17 at 15:33

Taplar

24,788
4
22
35

I am loading a .html file var string = 'release'; <-- fixed var number1 = 8; <-- will change every time var number2 = 3; <-- will change every time There are some ID in that file where id="_release_8_3_5" <-- I don't want content of this .... just the content where there are only 1 string and 2 numbers e.g id="_release_8_2" – Digvijay May 24 '17 at 15:36
Wait, so you are not looking for a specific id, you want all that match a pattern? – Taplar May 24 '17 at 15:38
YES... ID's that matches the pattern – Digvijay May 24 '17 at 15:38
Then use a class instead. Avoid pattern matching for lookups – Taplar May 24 '17 at 15:39
the file that I am loading is generated by ascii doctor (http://asciidoctor.org/) which creates tags by itself... and as a result I don't have access to modify the class .... even if I do.... I don't want to go back everytime I create the .html file from ascii doctor – Digvijay May 24 '17 at 15:40

use wildcard to find specific ID using javaScript

` ?

2 Answers2