Q&A
回答ありがとうございます。
しかしうまくいきませんでした。なぜでしょうか？
###前提・実現したいこと
以下のhtml文字列をjavascriptの正規表現で置換したいのですがうまくいきません。
置換前の文字列
html
1例によって金田邸へ忍び込む。<br> 2 <em class="sesame_dot">例によって</em>とは<ruby><rb>今更</rb><rp>（</rp><rt>いまさら</rt><rp>）</rp></ruby>解釈する必要もない。
↓↓↓こうしたい
望んでる置換後の文字列
html
1<span class="my_color">例によって金田邸へ忍び込む。</span><br> 2 <em class="sesame_dot"><span class="my_color">例によって</span></em><span class="my_color">とは</span><ruby><rb><span class="my_color">今更</span></rb><rp>（</rp><rt>いまさら</rt><rp>）</rp></ruby><span class="my_color">解釈する必要もない。</span>
やりたいことはタグとタグの間の文字列を class を持った span タグで囲むことです。ただし、rp タグ、rtタグ、rubyタグは囲まない。
###発生している問題
次のような 正規表現を javascript で書きましたがうまくいきません。
javascript
1//タグとタグの間の文字列を span で囲む 2text = text.replace(/(<(?!ruby|rt|rp)[^<]*?>)([^<]+)(<[^<]*?>)/g,'$1<span class="my_color">$2</span>$3'); 3 4//文頭から最初のタグまでの文字列を span で囲む 5text = text.replace(/^([^<]+?)</gm,'<span class="my_color">$1</span><'); 6 7//最後のタグから文末までの文字列を span で囲む 8text = text.replace(/>([^>]+)$/g,'><span class="my_color">$1</span>');
実際の置換後のhtml
html
1<span class="my_color">例によって金田邸へ忍び込む。</span><span class="br"></span><span class="my_color"> 2 </span><em class="sesame_dot">例によって</em><span class="my_color">とは</span><ruby><rb><span class="my_color">今更</span></rb><rp>（</rp><rt>いまさら</rt><rp>）</rp></ruby><span class="my_color">解釈する必要もない。</span>
em タグに囲まれた文字列「例によって」が span タグで囲まれない！
原因が分かりません。どうすれば希望通りの置換ができますか？
よろしくお願いします！！
回答4件
0
ちょっと違うアプローチですが、こんなの。
JavaScript
1text = (">"+text+"<").replace(/>[^<][\s\S]*?</g,"><span class=\"my_color\"$&/span><"); 2text = text.substr(1,text.length-2); 3text = text.replace(/(<(ruby|rp|rt)>)<span class="my_color">|<\/span>(<\/(ruby|rp|rt)>)/g,"$1$3");
投稿2017/01/27 15:17
総合スコア86295
0
String.prototype.replace
要件にはありませんが、期待する置換結果を見る限りでは
空白文字のみのテキストを読み飛ばす条件があるようですね。
何度も置換処理を走らせると想定外の状況が生まれて意図せぬマッチが発生しやすいので、一度の置換処理にまとめると良いと思います。
JavaScript
1'use strict'; 2var text = '例によって金田邸へ忍び込む。<br>\r\n <em class="sesame_dot">例によって</em>とは<ruby><rb>今更</rb><rp>（</rp><rt>いまさら</rt><rp>）</rp></ruby>解釈する必要もない。'; 3 4text = text.replace(/(^|>)(?!\s+(?:<|$))([^<]+)(?=<(?!\/r(?:[pt]|uby)>)|$)/g, '$1<span class="my_color">$2</span>'); 5console.log(text); // <span class="my_color">例によって金田邸へ忍び込む。</span><br>\r\n <em class="sesame_dot"><span class="my_color">例によって</span></em><span class="my_color">とは</span><ruby><rb><span class="my_color">今更</span></rb><rp>（</rp><rt>いまさら</rt><rp>）</rp></ruby><span class="my_color">解釈する必要もない。</span>
更新履歴
- 2017/01/28 19:39 入力文字列に改行コード後の半角スペースが抜けていたのを修正
Re: hikochang さん
投稿2017/01/28 05:08
編集2017/01/28 10:40
総合スコア18194
0
一旦すべてのタグとタグの間の文字列を class を持った span タグで囲む。
次に rp タグ、rtタグ、rubyタグについては spanタグを削除する。
JavaScript
1text = text.replace(/>[^<>]+</g,'><span class="my_color"$0/span><'); 2text = text.replace(/^[^<>]+/g,'<span class="my_color">$0<\/span>'); 3text = text.replace(/>[^<>]+$/g,'><span class="my_color"$0<\/span>'); 4text = text.replace(/<rt><span class="my_color">/g,'<rt>'); 5text = text.replace(/<\/span><\/rt>/g,'</rt>'); 6text = text.replace(/<rp><span class="my_color">/g,'<rp>'); 7text = text.replace(/<\/span><\/rp>/g,'</rp>'); 8text = text.replace(/<ruby><span class="my_color">/g,'<ruby>'); 9text = text.replace(/<\/span><\/ruby>/g,'</ruby>');
投稿2017/01/27 17:30
編集2017/01/28 01:46
総合スコア648
0
ベストアンサー
これなんてどうでしょうか？
問題の箇所は
- 改行にもタグを囲んじゃってる
- タグ閉じとタグ開始の間にある文字が抜けている
- スペースだけの場合でもタグを囲んでる
そんな感じですね。
JavaScript
1 //タグとタグの間の文字列を span で囲む 2 text = text.replace(/(<(?!ruby|rt|rp)[^<]*?>)([^<\n]+)(<[^<]*?>)/g,'$1<span class="my_color">$2</span>$3'); 3 4 //文頭から最初のタグまでの文字列を span で囲む 5 text = text.replace(/^([^<]+?)</gm,'<span class="my_color">$1</span><'); 6 7 //最後のタグから文末までの文字列を span で囲む 8 text = text.replace(/>([^>]+)$/g,'><span class="my_color">$1</span>'); 9 10 // タグの狭間のくくりを追加 11 text = text.replace(/(<\/[^>]+>)([^<]+)(<[^>]+?>)/g,'$1<span class="my_color">$2</span>$3'); 12 13 // ダサいスペースだけのタグくくりを排除 14 text = text.replace(/<span class="my_color">\s+<\/span>/g,'');
追記) 0:36 参考までにフルソース
html
1<html> 2<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> 3<script> 4$(function() { 5 $("#change").on("click",function() { 6 var text = $("#request").val(); 7 //タグとタグの間の文字列を span で囲む 8 text = text.replace(/(<(?!ruby|rt|rp)[^<]*?>)([^<\n]+)(<[^<]*?>)/g,'$1<span class="my_color">$2</span>$3'); 9 10 //文頭から最初のタグまでの文字列を span で囲む 11 text = text.replace(/^([^<]+?)</gm,'<span class="my_color">$1</span><'); 12 13 //最後のタグから文末までの文字列を span で囲む 14 text = text.replace(/>([^>]+)$/g,'><span class="my_color">$1</span>'); 15 16 // タグの狭間のくくりを追加 17 text = text.replace(/(<\/[^>]+>)([^<]+)(<[^>]+?>)/g,'$1<span class="my_color">$2</span>$3'); 18 19 // ダサいスペースだけのタグくくりを排除 20 text = text.replace(/<span class="my_color">\s+<\/span>/g,''); 21 22 $("#result").val(text); 23 }); 24}); 25</script> 26<body> 27<textarea id="request" style="width:800;height:160;"> 28 例によって金田邸へ忍び込む。<br> 29 <em class="sesame_dot">例によって</em>とは<ruby><rb>今更</rb><rp>（</rp><rt>いまさら</rt><rp>）</rp></ruby>解釈する必要もない。 30</textarea> 31<br> 32<input type="button" value="変換" id="change"><br> 33<textarea id="result" style="width:800;height:160;"> 34</textarea> 35<textarea id="answer" style="width:800;height:160;"> 36 <span class="my_color">例によって金田邸へ忍び込む。</span><br> 37 <em class="sesame_dot"><span class="my_color">例によって</span></em><span class="my_color">とは</span><ruby><rb><span class="my_color">今更</span></rb><rp>（</rp><rt>いまさら</rt><rp>）</rp></ruby><span class="my_color">解釈する必要もない。</span> 38</textarea> 39</body> 40</html>
投稿2017/01/27 14:34
編集2017/01/27 15:37
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/27 15:51
2017/01/27 19:37 編集