Чтобы решить вашу проблему, надо просто убрать рекурсивный вызов функции SpaceReplacer
function SpaceReplacer(){
document.getElementById('plseditme').innerHTML = document.getElementById('plseditme').innerHTML.replace(/_/gi, ' ').replace(/.exe/gi, '').replace(/.msi/gi, '').replace(/.zip/gi, '').replace(/.txt/gi, '');
document.getElementById('plseditme').id = 'edited';
}
Почему так происходит. getElementById возвращает не коллекцию элементов, а только 1. И тип возвращаемого элемента -
HTMLElement | null. Каждый раз, после изменения текста, ваша функция ищет новый элемент, и, когда они заканчиваются, вместо элемента приходит null и умирает смертью храбрых собачек.
По правильному на странице не должно быть больше одного элемента с одинаковым id, и лучше для этого использовать тэги.
Но, если мы хотим сделать так, чтобы ваша функция работала и не падала, нужно переписать ее следующим образом
function SpaceReplacer(tagName: string) {
const nodeList = document.querySelectorAll(`[${tagName}]`);
[...nodeList].map(elem => {
elem.innerHTML = elem.innerHTML
.replace(/_/gi, ' ')
.replace(/.exe/gi, '')
.replace(/.msi/gi, '')
.replace(/.zip/gi, '')
.replace(/.txt/gi, '');
return elem;
});
}
А если мы хотим, чтобы было немного веселее, можно сделать вот так
<html>
<head>
</head>
<body>
<a href="Simple_Text.zip" data-text >Simple_Text.zip</a><br>
<a href="Simple_Text.exe" data-text>Simple_Text.exe</a><br>
<a href="Simple_Text.msi" data-text">Simple_Text.msi</a>
</body>
</html>
<script>
function SpaceReplacer(tagName) {
const nodeList = document.querySelectorAll(`[${tagName}]`);
[...nodeList].map(elem => {
elem.innerHTML = elem.innerHTML
.replace(/_/gi, ' ')
.replace(/.exe/gi, '')
.replace(/.msi/gi, '')
.replace(/.zip/gi, '')
.replace(/.txt/gi, '');
return elem;
});
}
window.onload = ('data-text') => SpaceReplacer(data-text);
</script>
