Q&A
回答して下さりありがとうございます。
提示して下さったコードは完璧でした。
しかし、どうやらMeryはJavaScriptをそのまま実行できるのではなく、JavaScriptに準拠した仕様という形になっていて String.prototype.replace がサポートされていませんでした…。
これ以上はJavaScriptというよりはMeryが主体の質問になってしまいそうなので、この質問は終了させます。
後は皆さんの回答を参考に試行錯誤してみようと思います。
HTMLの形をしたテキスト(すべて文字列なのでDOMやNodeなどは存在しない)にあるnbspをカウントしてp要素に該当する文字列にクラスとして追加したいのですが、この様に文字列の部分的な処理を連続して行うにはどうしたら良いでしょうか？
ちなみに、この処理はMeryというテキストエディタのマクロとして利用するつもりなのですが、マクロ機能でJavaScriptがそのまま使える様なので、テキストエディタの事は特に考慮せず、普通のJavaScriptの質問として見て頂いて構いません。
<!-- HTMLの形をしていますが実際にはテキスト(文字列)です --> <!-- beforeはdiv直下のみで後は全てafter --> <div> <p>段落</p> <p>段落</p> </div> <div> <p>段落</p> <p>段落</p> </div> <div> <p>段落</p> <p>段落</p> </div>
↑を↓にしたい。
<!-- HTMLの形をしていますが実際にはテキスト(文字列)です --> <!-- beforeはdiv直下のみで後は全てafter --> <div> <p class="before-1 after-6">段落</p> <p class="after-2">段落</p> </div> <div> <p class="before-2 after-4">段落</p> <p class="after-1">段落</p> </div> <div> <p class="after-1">段落</p> <p class="after-3">段落</p> </div>
回答3件
0
/<div[^>]*>([ |\s| ]*)([\s\S]*)<\/div>/ig ```でdivを分割して、（ついでに先頭のスペース群をキャッチ）
/<p[^>]>[^<]+</p>([ |\s| ])/ig
それぞれスペースをカウントして<pの後（or class=""内）にクラスを追加する感じでしょうか。 --- **追記：** 書き方が悪いのだと思いますがRegExpで取得すると空白が無視されてしまうので未完成ですが、splitやreplaceで処理すれば何とかなると思います。 **動くサンプル：**[https://jsfiddle.net/mLwwq58g/1/](https://jsfiddle.net/mLwwq58g/1/)
投稿2016/06/11 07:28
編集2016/06/11 09:52
総合スコア69625
0
ベストアンサー
String.prototype.replace
String.prototype.replace の第二引数に関数を指定して分岐処理すれば良いと思います。
JavaScript
1<script> 2'use strict'; 3function addClassByStartTag (startTag, token /* [...token] */) { 4 if (arguments.length < 2) { 5 return startTag; 6 } 7 8 startTag = /^(<\w+)((\s[^>]*class\s*=\s*")([^"]*)("[^>]*>)|[^>]*>)$/.exec(startTag); 9 10 if (startTag[3]) { 11 var tokens = startTag[4].trim().split(/\s+/); 12 13 for (var i = 1, l = arguments.length; i < l; ++i) { 14 token = arguments[i]; 15 16 if (tokens.indexOf(token) === -1) { 17 tokens.push(token); 18 } 19 } 20 21 return startTag[1] + startTag[3] + tokens.join(' ') + startTag[5]; 22 } 23 24 var tokens = []; 25 26 for (var i = 1, l = arguments.length; i < l; ++i) { 27 tokens.push(arguments[i]); 28 } 29 30 return startTag[1] + ' class="' + tokens.join(' ') + '"' + startTag[2]; 31} 32 33function replaceSample (string) { 34 var before; 35 36 return string.replace(/(<p(?: [^>]*)?>)([^<>]*<\x2Fp>)([^<>]*)|(<[^>]*>)|([^<>]+)/g, function (match, p1, p2, p3, p4, p5) { 37 if (p1) { 38 var tokens = [p1], after, length; 39 40 if (before) { 41 tokens.push('before-' + before); 42 } 43 44 after = p3.match(/ /g); 45 46 if (after) { 47 tokens.push('after-' + after.length); 48 before = after.length; 49 } 50 51 return addClassByStartTag.apply(null, tokens) + p2 + p3; 52 } 53 54 if (p4) { 55 before = 0; 56 } 57 58 if (p5) { 59 before = p5.match(/ /g); 60 before = before ? before.length : 0; 61 } 62 63 return match; 64 }); 65} 66 67function handleSubmit (event) { 68 var elements = event.target.elements; 69 70 event.preventDefault(); 71 elements['output'].value = replaceSample(elements['input'].value); 72} 73</script> 74 75<Form onsubmit="handleSubmit(event);"> 76<p> 77<textarea name="input"><!-- HTMLの形をしていますが実際にはテキスト(文字列)です --> 78<!-- beforeはdiv直下のみで後は全てafter --> 79<div> 80&nbsp; 81<p>段落</p> 82&nbsp; 83&nbsp; 84&nbsp; 85&nbsp; 86&nbsp; 87&nbsp; 88<p>段落</p> 89&nbsp; 90&nbsp; 91</div> 92 93<div> 94&nbsp; 95&nbsp; 96<p>段落</p> 97&nbsp; 98&nbsp; 99&nbsp; 100&nbsp; 101<p>段落</p> 102&nbsp; 103</div> 104 105<div> 106<p>段落</p> 107&nbsp; 108<p>段落</p> 109&nbsp; 110&nbsp; 111&nbsp; 112</div> 113 114<!-- div要素をネストする --> 115<div> 116<div> 117<!-- class属性のあるp要素 --> 118<p class="hoge">段落</p> 119&nbsp; 120<p>段落</p> 121&nbsp; 122&nbsp; 123&nbsp; 124</div></div><div><!-- テキストノードを挟まない場合 --><p>段落</p> 125&nbsp; 126<p>段落</p> 127&nbsp; 128&nbsp; 129&nbsp; 130</div> 131</textarea> 132</p> 133<p><input type="submit" value="変換"></p> 134<p> 135<textarea name="output"></textarea> 136</p> 137</Form>
更新履歴
- 2016/06/12 06:36 連続するp要素の2つ目以降のp要素の before-n が期待通りに動作しなかった不具合を修正。before-n における
の合計算出時に要素を乗り越えて記録していた不具合を修正(今までのサンプルではホワイトスペースノードで数値がクリアされていたので表面化されていませんでした)。
Re: flat さん
投稿2016/06/11 12:12
編集2016/06/11 21:44
総合スコア18194
replaceがサポートされていないというのは私の勘違いでした。
また、一部意図した通りに置換されないようです。
具体的にはdiv内の2つ目以降のp要素にも同じbefore-xが追加されていってしまいます。
これを改善するには「div内の一番最初のp要素かどうか」という条件を判定できるようにしなければいけないと思うのですが、replaceSample()内の正規表現を変更する事でこれに対応出来るでしょうか…？
修正しました。
正規表現とは関係ない部分でのバグなのでこのコードがどう動いているのか、を一つ一つ追ってみてください。
修正して下さりありがとうございます。
修正前
次の p4(before部分の ) をキャッチしてカウントするまで before の数値がクリアされていなかった
修正後
before に手前のp要素の after の数値を代入して実質的に正常な数値にした上で、念の為にdiv要素をキャッチしたときに before の数値をクリア
コードを読み解く力が自分にはまだまだ不足していると実感したと同時にすごく勉強になりました。
0
ごめんなさい，これやってること逆でした… ↓
(後で直します)
html
1<!DOCTYPE html> 2<meta charset="UTF-8"> 3<title>Example</title> 4 5<div> 6 <p class="before-1 after-6">段落</p> 7 <p class="after-2">段落</p> 8</div> 9<div> 10 <p class="before-2 after-4">段落</p> 11 <p class="after-1">段落</p> 12</div> 13<div> 14 <p class="after-1">段落</p> 15 <p class="after-3">段落</p> 16</div> 17 18<script> 19'use strict'; 20 21addEventListener('DOMContentLoaded', function () { 22 Array.prototype.slice.call(document.getElementsByTagName('p')).forEach(function (p) { 23 var reg = /\b(before|after)-(\d+)\b/g; 24 var cls = p.getAttribute('class'); 25 var m; 26 while ((m = reg.exec(cls)) !== null) { 27 var pos = m[1] === 'before' ? 'beforebegin' : 'afterend'; 28 var txt = new Array(parseInt(m[2]) + 1).join(' '); 29 p.insertAdjacentHTML(pos, txt); 30 } 31 }); 32}); 33</script>
投稿2016/06/11 07:40
編集2016/06/11 07:48
総合スコア5223
回答して下さりありがとうございます。
質問にあるコードなのですが、HTMLの形をしてはいるものの実際にはテキストなのです。
私の質問内容が分かりにくいので書き直します。
処理系はNode.jsではなくフロントエンドですか？
なるほどMeryですか．ElectronベースのAtomであれば無理して正規表現で頑張らなくてもDOMParserが使えるのですが，Meryはちょっと怪しいですね…
http://caniuse.com/#search=DOMParser
やはりDOMとして扱えると便利ですね…。
Atomも利用してはいるのですが、テキストエディタとしては動作が遅いので、ちょっとした編集をしたい時には使いにくいのが難点です…。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/11 08:05
2016/06/11 09:53
2016/06/11 12:03