I have a very large HTML string, and i want to grab certain tags/elements from it depending on an id value given, if there are multiple tags in the html string i want to grab them all and there contents.

at the momment i am using querySelectorAll to do this but it returns a list for the ids in it (not what i want).

example: if i search for an id that starts with tooth-311, i would want to return something like this for tags that have that tooth-311 at the start of there id.

<g id="tooth-311-default">
                    <g>
                        <g id="XMLID_9_">
                            <g>
                                <path class="st16" d="M858.8,1050.8c0,0-1.8,11.3,5.2,12.3l24.2-5.5h0c0.8-2.1,1.8-5.1,1.6-7.6c0,0-9.6-14.6-18.2-11.9
                                    C863,1040.7,858.8,1050.8,858.8,1050.8z"/>
                                <path class="st16" d="M888.2,1057.5l-24.2,5.5C873.7,1064.6,888.1,1057.9,888.2,1057.5z"/>
                                <path class="st25" d="M888.2,1057.5c-0.1,0.3-14.5,7.1-24.2,5.5c0,0,10.9,30,17.2,29.5c6.3-0.5,5.9-23,5.7-32.2
                                    C886.9,1060.3,887.5,1059.2,888.2,1057.5L888.2,1057.5z"/>
                            </g>
                            <g>
                                <path class="st20" d="M888.2,1057.5c0.8-2.1,1.8-5.1,1.6-7.6c0,0-9.6-14.6-18.2-11.9c-8.6,2.6-12.8,12.8-12.8,12.8
                                    s-1.8,11.3,5.2,12.3c0,0,10.9,30,17.2,29.5c6.3-0.5,5.9-23,5.7-32.2C886.9,1060.3,887.5,1059.2,888.2,1057.5z"/>
                                <path class="st20" d="M888.2,1057.5c-0.1,0.3-14.5,7.1-24.2,5.5"/>
                            </g>
                        </g>
                    </g>
                </g>

at the moment i am trying this

            var parser = new DOMParser();
            var doc = parser.parseFromString(svg, "text/html");
            var teeth = doc.querySelectorAll(`[id^=tooth-311]`);
            console.log(teeth)

Where svg is the name of the html string