How to change the heading tags <h1> to <h1 data-splitting> and <h2> to <h2 data-splitting> and <h3> to <h3 data-splitting> and <h4> to <h4 data-splitting> in WordPress?

How can I change them on all pages through hard coding or by change through JS/JQuery? (My pages are fully cached by Cloudflare CDN)

For hard coding, where should I look at, on theme files, or is it coded into the WordPress itself?

There are ID’s and classes such as <div id="nav"> and <div class="sidebar-box"> but what is the above type is called as? Is it same as <h2> + <data-splitting>?

This is required to add some animation effect to the headings - View on Codepen

Now how can I change heading tags?

I added this to the WordPress fuctions.php:-

 function enqueue_my_custom_script() {
    wp_enqueue_script( 'hjs', 'https://example.com/h.js', false );
}

add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_script' );

The h.js has the following code:-

$('document').ready(function() {

    $('h1, h2, h3, h4').attr('data-splitting', '');

});

But this doesn't add the script to the head.

I even added it manually as <script async src="https://example.com/h.js"> but it does not gets show up in the head.

So I have added the JS file as an inline script in the head, now the script does shows up in the head section as inline JS but doesn't change the <h1> to <h1 data-splitting> and <h2> to <h2 data-splitting>.

<script>
$('document').ready(function() {

    $('h1, h2, h3, h4').attr('data-splitting', '');

});
</script

or as

<script>
jQuery.noConflict()(function($) {
    $('document').ready(function() {

        $('h1, h2, h3, h4').attr('data-splitting', '');

    });
});
</script>

Now the script is present in the head as inline JS but it does not change the heading tags.