表示されている文字列に区切り線毎に文字に背景色を付けたい

Question

前提・実現したいこと

参考ソースを元に修正しておりましたが上手くいかず困っております。
試したいのは
既にある文字列に区切り線毎に文字色を追加したいです。

発生している問題・エラーメッセージ

元々はinputタグで打ち込んだ文字に自動的に背景色を追加できる仕様でしたが
それをinputではなくpタグにしようと修正をした所上手くいっていない状態です

該当のソースコード

<div id="overlay-sample">
    <div id="overlay-textbox-area">
        <div id="overlay-area"></div>
    	<p>XXX/XXX/XXX/XXX/XXX</p>
    </div>
</div>

コード

試したこと

<style type="text/css">
    #overlay-sample {
        margin: 30px;
        font-family: inherit;
    }
    #overlay-area {
        color: transparent;
        letter-spacing: .02em;
        margin: 2px;
        overflow-wrap: break-word;
        overflow: hidden;
        padding: 13px 12px;
        position: absolute;
        white-space: pre-wrap;
        width: 100%;
    }
    #overlay-area span.overlay {
        background-color: #ffcc80;
        border-radius: 2px;
        box-shadow: 0 0 0 1px #ffa726;
        padding-bottom: 1px;
        padding-top: 1px;
    }

    #overlay-textbox-area p {
        background: transparent;
        letter-spacing: .02em;
        outline: 0px;
        padding: 6px 12px;
        position: relative;
        width: 100%;
    }
</style>
<script type="text/javascript">
    const textElem = document.querySelector('#overlay-textbox-area p');
    textElem.addEventListener('DOMContentLoaded', function() {
        renderOverLay(event.target.value);
    });

    function renderOverLay(text) {
        const overlayArea = document.getElementById('overlay-area');
        const charPartsList = text.split('/');
        let spanSource = '';
        for (let i = 0; i < charPartsList.length; i++) {
            if (spanSource !== '' && !spanSource.match(/ $/)) {
                spanSource += ' ';
            }
            if (charPartsList[i] === '') {
                spanSource += ' ';
            } else {
                spanSource += `<span class="overlay">${charPartsList[i]}</span>`;
            }
        }

        overlayArea.innerHTML = spanSource;
    }
</script>

Answer 1

質問タイトルが「区切り線毎に文字に背景色を付けたい」ですが
「既にある文字列に区切り線毎に文字色を追加したい」と
質問文に書かれていてまぎらわしいため、
質問タイトルを変更したほうが良いです。

「既にある文字列に区切り線毎に文字色を追加したい」場合は
下記のようにreplaceで置換すればできます。

<style>
.orange {
  color: orange;
}
</style>
<div id="overlay-textbox-area">
  <p>XXX/XXX/XXX/XXX/XXX</p>
</div>
<script>
const textElem = document.querySelector("#overlay-textbox-area p");
const textElemArr = textElem.textContent.split('/').map(v => {
  return v.replace(/(.+)/g, '<span class="orange">$1</span>')
});
textElem.innerHTML = textElemArr.join('/');
</script>

Comments

[pontas]

ありがとうございます！
試してみます
タイトルは変更させて頂きます

[pontas]

ありがとうございました。
こちらで無事対応が出来ました。

Answer 2

document.addEventListener('DOMContentLoaded', function() {
    renderOverLay(textElem.innerText);
});

ではないでしょうか。

Comments

[pontas]

ご回答ありがとうございます。
試してみます