I cannot read value using document.getelementbyId , it gives me an error AddNote:44 Uncaught TypeError: Cannot read properties of null (reading 'value')

Here is my Code : 

<apex:page standardController="Opportunity" lightningStylesheets="true" extensions="AddNoteController">
    
    
    <script type="text/javascript">
        function CheckUrl() {
            console.log('I AM IN ');
            
            var text = document.getElementById("{!$Component.div1.theform.thePageBlock.thePageBlockitem.test}").value;
            
            if(new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?").test(string1)) {
                alert("Url is present in this statement");
                 console.log('I AM IN IF OF THE CALL');
            }
            else {
                console.log('I AM IN ELSE OF THE CALL');
                savenote1();
                
            }
        }
    </script>
    
    <div class="slds-scope" id="div1">
        
        <apex:form  id="theform">
            <apex:pageBlock >
                <apex:pageBlockSection  id="thePageBlock">
                    <apex:pageBlockSectionItem id="thePageBlockitem" >
                        <apex:inputTextarea id="test" value="{!notes}" style="height:150px; width:200px"/>
                    </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem >
                        <apex:commandButton value="Save" onclick="CheckUrl();return false;"/> 
                    </apex:pageBlockSectionItem>
                </apex:pageBlockSection>
            </apex:pageBlock>
            
            <apex:actionFunction id="savenote" name="savenote1" action="{!saveNote}"></apex:actionFunction>
        </apex:form>
        
    </div>
    
</apex:page>