replace with a string that depends on what found - html

Question

If I want to replace
1. First title
with
1. First title
which means I want to replace the garbage text with the numbering in the content, how can I do that with command find and replace engine like the ones in VScode or sublime text?
I have tried:
find: #.*">[0-9]+\.
replace: #$$0">$$0.
This doesn't work at all and further, when the list goes long, numberings may have more digits, like "17. Some title". Better use only plain find and replace engines rather than other programmes or JS.

Answer 1

You could do it in jQuery:
$('a').each((i, a) => {
$(a).attr('href', '#' + parseInt($(a).text()));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1. First title
2. Second title
3. Third title
or in pure JavaScript:
document.querySelectorAll('a').forEach(a => {
a.href = '#' + parseInt(a.innerHTML);
});
1. First title
2. Second title
3. Third title

Answer 2

You can do it with Vanilla Javascript using a regex matching the first digit of the string :
^[\d]*
You can test it here : https://regex101.com/r/Vq0Vm0/1
Something like that will work :
const $aList = document.querySelectorAll('a');
const pattern = /^[\d]*/g;
$aList.forEach($a => {
const digit = $a.textContent.match(pattern)[0];
$a.setAttribute('href', `#${digit}`);
});
1. First title
17. First title
1456456. First title
1456546654. First title
1546456. First title

Answer 3

I would personally use jQuery alongside a RegEx match to extract the number in the string.
HTML:
<div class="row d-flex justify-content-center">
<div class="col-md-4 d-flex justify-content-center">
<button class="btn-primary btn-change-content">Change content</button>
</div>
<div class="col-md-4 d-flex justify-content-center">
1. First title.
</div>
<div class="col-md-4 d-flex justify-content-center">
2. Second title.
</div>
</div>
jQuery:
$('.btn-change-content').on("click", function() {
$('a').each(function () {
var anchorText = $(this).text();
var num = anchorText.match(/\d+/)[0];
$(this).attr("href", "#"+num);
});
});
$('a').on("click", function(e) {
e.preventDefault();
var hrefAttr = $(this).attr("href");
alert(hrefAttr);
});
Snippet: (try to first click the anchor tags, then change content and click them again)
$('.btn-change-content').on("click", function() {
$('a').each(function () {
var anchorText = $(this).text();
var num = anchorText.match(/\d+/)[0];
$(this).attr("href", "#"+num);
});
});
$('a').on("click", function(e) {
e.preventDefault();
var hrefAttr = $(this).attr("href");
alert(hrefAttr);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row d-flex justify-content-center">
<div class="col-4 d-flex justify-content-center">
<button class="btn-primary btn-change-content">Change content</button>
</div>
<div class="col-4 d-flex justify-content-center">
1. First title.
</div>
<div class="col-4 d-flex justify-content-center">
2. Second title.
</div>
</div>
Codepen Example here.