Skip to main content
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
パターンマッチしたい旨を本文にも記載
ソース リンク

UserScriptである要素の 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で取得する、なんてことができれば簡単そうなのですが…。

UserScriptでページ中に登場する特定の文字列をタグで囲み、イベントハンドラを設定したいと考えています。例えば、<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で取得する、なんてことができれば簡単そうなのですが…。

ある要素の 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で取得する、なんてことができれば簡単そうなのですが…。

ソース リンク

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

UserScriptで、ページ中に登場する特定の文字列をタグで囲み、イベントハンドラを設定したいと考えています。例えば、<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で取得する、なんてことができれば簡単そうなのですが…。