WordPress投稿画面でその場置換ができるブックマークレットを作成しましたので公開します。
WordPress投稿画面でその場置換がしたくなった経緯
みなさんはWordPressの投稿画面のコンテンツをどうやって置換していますでしょうか？「Search Regex」プラグインを使っていますか？わたしもSearchRegexの存在は知っていますしなんどか使ったことはあります。SearchRegexは非常に便利で素晴らしいプラグインです。
しかし私はこう思いました。WordPressで「その場置換がしたい」というか、なんでWordPressとあろうものがその場置換ができる機能がないんだと。ブラウザの機能または、WordPressにも検索はできる機能はあります。しかしなぜか置換する機能がないのです。（わたしが情報弱者なだけで標準の置換機能があることを知らないだけかもしれませんが）| とにかくこういう経緯があったのでWordPressの投稿画面でその場置換ができるブックマークレットを作りました。
※WordPressだけじゃなくて、コードを少し変えればいろいろな場面で使えるコードになっています。※このコードが正常に動く条件としてWordPressの投稿が下書き保存または投稿済みで状態であることが条件になります。このあたりは後述します。
WordPressの投稿画面で投稿内容をその場置換するJqueryコード(ブックマークレット)
ひとまずコードを公開しておきますね。
javascript : (function (d) {
function l() {
(function ($) {
var replace_before = prompt('置換したい文字を入力してください');
var replace_arter = prompt('置換後の文字を入力してください');
alert('本当に置換しますか？');
var content = $('#content').text();
var content = content.replace(new RegExp(replace_before, 'g'), replace_arter);
$('#content').text(content);
})(jQuery)
}
if (typeof jQuery == 'undefined') {
var j = d.createElement('script');
j.type = 'text/javascript';
j.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
d.body.appendChild(j);
j.onload = l
} else {
l()
}
})(document);
このコードが動く条件
このコードが動く条件として、WordPressの投稿が下書き保存済み または 投稿済み になっていることが条件になります。→これはなぜか？なぜなら、下書き保存または投稿された状態でないと入力したテキストが、html要素のテキストとして認識されないからです。※このあたりはうまくやれば下書き保存すらせずにその場置換を行うことができるかもしれません。しかし今の私の力ではその機能を実装することはできません。
ですので、もしこのブックマークレットを使う場合は、WordPressの投稿が下書き保存済み または 投稿済みの状態であるものに使用してください。
注意！！置換したらCtrlZでは元に戻せませんが “ページを更新したら元にもどります”
このコードで置換した文字列はキーボードショートカットのCtrl + zを使っても元にもどすことはできません。そのため、失敗してしまった場合は、入力した内容を保存せずにWordPressの投稿ページを更新してください。
置換前にアラートを表示し本当に置換するか聞くようにしています。これである程度ミスは防げるし、置換をミスしてしまってもページを更新すれば元にもどります。
コード解説
簡単なコードではありますがコードの解説をしておきます。
- prompt(); → ユーザーからの入力を受け付けます
- alert(); → アラートダイアログを表示します。
- new RegExp(pattern[, flags]) → 正規表現オブジェクトを生成します
- replace(); → 特定の文字を置換します
- text(); → 要素にテキストを入力します
replace()だけではだめ
わたしははじめreplace()だけで置換できるとおもっていて、何度かトライ&エラーを繰り返していました。しかし、replace()で置換はされるものの、置換したものをtext()で指定してやらないと、見た目で置換されたかどうかはわからないのです。これは少しはまったところでした。
圧縮版のコード
ブックマークレットとして使用できるように圧縮版のコードも貼り付けておきますね。
javascript:(function(d){function l(){(function($){var replace_before=prompt('置換したい文字を入力してください');var replace_arter=prompt('置換後の文字を入力してください');alert('本当に置換しますか？');var content=$('#content').text();var content=content.replace(new RegExp(replace_before,'g'),replace_arter);$('#content').text(content)})(jQuery)}if(typeof jQuery=='undefined'){var j=d.createElement('script');j.type='text/javascript';j.src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';d.body.appendChild(j);j.onload=l}else{l()}})(document);
まとめ
今回作成した、WordPress投稿その場置換ブックマークレットはコードを少し変えれば、いろいろな場面に使えるかと思います。個人的には下書き保存状態じゃなくても置換できるようにしたいので、またやる気がでてきたら考えてみたいと思います。
コメント