正規表現にマッチしたテキストをタグで囲み、イベントハンドラを設定したい

ある要素の innerText/textContent のうち、特定の正規表現（例: /#\d+/）に該当する文字列をタグで囲み、イベントハンドラを設定したいと考えています。例えば、<p>その件は #123 を参照してください。</p> というHTMLの中で #123 にマウスカーソルを乗せると、対応するIssueの詳細がポップアップされる、といったものです。

一つ思いついた方法としては、innerHTML に対して置換を行うものです。

target.innerHTML = target.innerHTML
                   .replace(/#(\d+)/g, (s, id) => `<a href=".../${id}">${s}</a>`);

単純なリンクに置き換えるだけならこれでもいいのですが、設定する属性やイベントハンドラが多くなってくるとタグに記載するのは面倒ですし、読みにくくなってしまいます。かといってこの時点では文字列なので、Elementオブジェクトにはアクセスできません。

UserScript として作る都合上、できれば class 属性等を使うのも避けたいです（対象ページでの使用箇所と競合する可能性があるので）。

選択範囲に対して同様のことをした時には Range.prototype.surroundContents() が使えたので、今回もマッチ範囲をRangeで取得する、なんてことができれば簡単そうなのですが…。