JavaScriptの正規表現について

Question

前提・実現したいこと

否定後読みが使えない条件下で以下ソースの文字列から特定の場所にあるuserだけを置換したいと考えています。（コメント部分は本来無い物としてお考えいただけましたら幸いです）

JavaScriptを使って置換することは可能でしょうか？

ご教示いただけましたら幸いです。

該当のソースコード

const text = `
  ユーザー名：user メールアドレス：test@mailcom // この行の`user`は置換する
  <img alt="user" src="user.jpg" /> // この行は置換しない
  <a href="/user.html" title="user">user</a> // この行のaタグで挟まれている`user`だけを置換する（href, titleの`user`は置換しない）

  ユーザー名：user1 メールアドレス：test1@mailcom // この行の`user`だけを置換する（`1`は残したい）
  <img alt="user1" src="user1.jpg" /> // この行は置換しない
  <a href="/user1.html" title="user1">user1</a> // この行のaタグで挟まれている`user`だけを置換する（`1`は残し、href, titleの`user`は置換しない）
`;

試したこと

否定後読みを使い正規表現で置換しようと考えていましたが、FireFoxで利用できなかった。

Comments

[miyabi_pudding]

可能かどうかだけ回答すればよろしいでしょうか？？

[miyabi_pudding]

> 否定後読みを使い正規表現で置換しようと考えていましたが、FireFoxで利用できなかった。

これを実行した、自身のソースコードを記載お願いします。
現状の質問文ですと、可能かどうかだけわかればいいとなってしまっているのと、
その正規表現の方法まで聞きたいのであれば、
自身のコードを提示しないと、
丸投げの質問になってしまうかと思います。

[think49]

質問をクローズしてください。
https://teratail.com/help#resolve-question
未解決の場合は、質問を「編集」して詳細を書いてください。

Answer 1

要件

「テキストノード値を置換したい」と受け取りました。

正規表現

複雑なHTMLに対して、正規表現は向いていません。

• テキストノード値で <> がエスケープされている
• HTMLタグは完全な形で文字列に格納されている(src="user"> のようなHTMLタグの部分文字列ではない)
• 属性値で <> がエスケープされている
• コメントで <> がエスケープされている
• etc

の条件を揃えれば、テキストノードを判定することは可能ですが、DOM APIがより確実です.

XPath

XPathを使えば、比較的簡単にテキストノードを検索できます。

• Document.evaluate() - Web API | MDN
• XML Path Language (XPath) 2.0

'use strict';
const text = `
  ユーザー名：user メールアドレス：test@mailcom
  <img alt="user" src="user.jpg" />
  <a href="/user.html" title="user">user</a>
  `;
const div = document.createElement('div');

div.innerHTML = text;
const xpathResult = document.evaluate('descendant::text()[contains(.,"user")]', div, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

for (let i = 0, len = xpathResult.snapshotLength; i < len; ++i) {
  const textNode = xpathResult.snapshotItem(i);
  textNode.data = textNode.data.replace(/user/g, 'replaced');
}

console.log(div.innerHTML);
/*
"
  ユーザー名：replaced メールアドレス：test@mailcom
  <img alt="user" src="user.jpg">
  <a href="/user.html" title="user">replaced</a>
  "
*/

Re: letmedown さん

Answer 2

こんにちは

否定後読み

を使える場合に比べて、コードの行数は増えますが、以下でどうでしょう？

const text1 = text.replace(/["/]user/g, str => `${str[0]}_USER_`);
const text2 = text1.replace(/user/g, 'hoge');
const text3 = text2.replace(/_USER_/g, 'user');

console.log(text3);

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/bGVybgw?editors=0012

やっていることは以下です。

• " または / の後にある user を _USER_ に置き換え
• user を hoge に置き換え
• _USER_を user に戻す

参考になれば幸いです。

Answer 3

FireFoxの管理ツールでざっと実行したら普通にできたけど違うんかな？
バージョンは76.0.1

var a =`ユーザー名：user メールアドレス：test@mailcom 
<img alt="user" src="user.jpg" /> 
<a href="/user.html" title="user">user</a> 

ユーザー名：user1 メールアドレス：test1@mailcom 
<img alt="user1" src="user1.jpg" /> 
<a href="/user1.html" title="user1">user1</a>`

a.replace(/(?!".*?)user(?!.*?")/g,'huga')