正規表現：英単語にはヒットさせHTMLエスケープにはヒットさせない方法

Question

正規表現のパターンで悩んでいます。環境はＰＣ・モバイルのブラウザで、JavaScript内で正規表現を使用しています。
HTML内に記述されている英単語に一括してaタグを付けたいので、以下のような正規表現で置換を実行しています。

regularExpression = /([a-zA-ZÀ-ÿ]+)/g;

これで概ね問題なく置換ができているのですが、HTMLのエスケープ文字がある文書の場合、中間部分にヒットしてしまいます。<であればltにヒットします。
これを避けるため、否定後読みで対応しようとしたのですが、

regularExpression = /((?<!&)[a-zA-ZÀ-ÿ]+)/g;

これですと、<であればtにヒットします。lが&の存在によりアンマッチとなった次に、tからマッチングを開始してtがマッチしたのだと推測しています。
HTMLエスケープの末尾の;は、英文中でも単語末尾に登場しますので、後読み無しで単独で使用することはできません。
そこで、先読みと組み合わせて、

regularExpression = /((?<!&)[a-zA-ZÀ-ÿ]+(?!;))/g;

前後を条件として記述したところ、ＰＣ環境のChromeでは成功する（ＨＴＭＬエスケープ以外の英単語にマッチする）のですが、MacのSafariとモバイル環境SafariとChromeでは、なぜか、ＨＴＭＬエスケープだけでなく、すべての単語にマッチしなくなります（先の２つのパターンはいずれの環境でもマッチング結果は同じです）。
なお、
・英文の空白部分にはマッチさせたくないので、「空白に続くアルファベット文字列」というパターンは使用したくありません。
・文章全体の置換なので重い処理ですから、予めHTMLエスケープ文字を代替文字に置換しておいて、もう一度HTMLエスケープに戻すという２回の置換を行う策は避けたいです。

できれば正規表現による置換だけで目的を達成したいのですが、手詰まりになってしまいました。皆様お知恵拝借させて下さい。よろしくおねがいします。

Comments

[maisumakun]

> できれば正規表現による置換だけで目的を達成したいのですが

textContentから拾えば、エスケープは展開されて文字になっているかと思うのですが、そういう手段は取れないのでしょうか？

[benkyo.fun]

（すみません。削除しました。）

[benkyo.fun]

通常のＨＴＭＬ文書なので、構文要素として<div>や<br>を含んでいるため、textContentで取得してしまうと、これらが消失し、後で戻すときに体裁が復元できないようです。

[otn]

調べるとSafariは後読みに対応してないという記述が見つかります。
Chromeは問題なし。
ということで、
> MacのSafariとモバイル環境SafariとChromeでは、なぜか、ＨＴＭＬエスケープだけでなく、すべての単語にマッチしなくなります（先の２つのパターンはいずれの環境でもマッチング結果は同じです）。

は、確認ミスでは無いでしょうか。Safariのみ2つ目と3つ目が他と異なるという結果になるはず。

[benkyo.fun]

失礼しました。たしかにご指摘の通りで、Safariは2つ目と３つ目で、マッチに失敗します。
一方、Chromeは、再度確認してみましたが、デスクトップ版（Mac Versión 96.0.4664.55 (Build oficial) (x86_64))では、３つ目はマッチに成功しますが、モバイル版（iPhone　96.0.4664.53）ではマッチに失敗します。
まとめますと、以下の通りです。

２番目
regularExpression = /((?<!&)[a-zA-ZÀ-ÿ]+)/g;

Mac Safari
iPhone Safari
この２つは同じ結果
　何にもマッチしない

Mac Chrome
iPhone Chrome
この２つは同じ結果
　&lt;のtにマッチ

３番目
regularExpression = /((?<!&)[a-zA-ZÀ-ÿ]+(?!;))/g;

Mac Safari
iPhone Safari
この２つは同じ結果
　何にもマッチしない

Mac Chrome
　英単語にはマッチしてHTMLエスケープにはマッチしない
iPhone Chrome
　何にもマッチしない

[otn]

AndroidのChromeだと3番目で問題ないですね。

[benkyo.fun]

確認ありがとうございます。そうなんですね。
iOSのアプリでChromeをエンベッドブラウザにしている他のアプリからでも同じ現象でした。正規表現でだけでなんとかできるに越したことはないのですが、環境起因の制限があるとすると厳しいですね。

Answer 1

コールバック付きの置換を行って、「&***の形も拾うけど、そこは置換せず返す」ことで対応する方法はどうでしょうか？（MDN）

text.replace(/&?([a-zA-ZÀ-ÿ]+)/g, (match) => match[0] === '&' ? match : `<a>${match}</a>`)

Comments

[benkyo.fun]

ありがとうございます。要望が実現できました。
処理が一つ増えますが、全体を何度も置換するよりはよっぽど速そうです。

[benkyo.fun]

replaceの第二引数は関数が指定できるんですね。勉強になりました。