How to select id that contains Meta Character in HTML ?

Last Updated : 19 Jul, 2024

Introduction: In the programming, a lot of times we have seen Metacharacter, before going on the main topic let's have brief info about Meta characters. These are the special characters available in the programming that has special meaning. There are several meta characters some of them are listed below:

Example:

 /  $  [  ]  {  }  |  *

Approach: Suppose we have to change the color of the text which is under the h1 tag. The very basic approach to achieve this is to give the h1 tag an ID or class and then by using jQuery we can use that ID or class to manipulate the text of that element. But in programming, there are some standard naming conventions for the id's and classes, for ids and classes we should always use lowercase and if we have to give a multi-word name then we can separate that word using "-". But what if an id is named using special characters, in this case, if we try to manipulate that element using that id or class then we'll have an error, So how to get rid of that error and make that work.

In jQuery, there is a method called escapeSelector() this method will handle all the special characters in the id's name. So now we are going to use this method.

Syntax:

 $.escapeSelector( selector )

Example 1: In this example, we have given h1 tag with id attribute that name contains some special characters, that do not come under standard naming conventions. To overcome that issue, we will use the escapeSelector() method and with the help of that method, we will access the h1 tag and manipulate its content in the example below.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
        integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
    </script>
</head>

<body>
    <!-- id of h1 tag contains meta 
        characters ( [ ] ); -->
    <h1 id="[metachar]">GeeksforGeeks</h1>

    <button>Click</button>
    
    <script>
        $("button").click(function () {

            // escaping the meta characters
            // for id's only
            $("#" + $.escapeSelector("[metachar]"))
                .css("color", "Green");
        });
    </script>
</body>

</html>

Output:

Explanation: We have given an id a name that contains a meta-character and then we are changing the color of the text of the h1 tag using its id. Note that if we won't use jQuery.escapeSelector() method then we would have an error message. On the right side, in the console we can see there is no error, So this is how we can get rid of this simple issue.

Example 2: In this example, we will use the same escapeSelector() method, but this time we will use another special symbol "#" in the id name of the h1 tag, and manipulate its content. This time we will change the font size of the text of the h1 tag.