HandyFlowyの一括置換スクリプトを正規表現対応にしてみた RepAll

一番苦労は入力欄。

一括置換

WorkFlowyで文字列置換を行うブックマークレット　ReplaceFlowy｜マロ。｜note
マロ。2016/05/13 06:53Workflowyを文章エディタとして使うには、やはり文字列の置換が欲しいというわけで、文字列置換を行うブックマークレット ReplaceFlowyを作りました。...

ReplaceFlowyの登場は画期的でした。表示中のテキストを一括置換。文章エディタとしてWorkFlowyが生きてきます。新しいスクリプトでシステムが進化する。

RepAll

HandyFlowy 1.1
分類: 仕事効率化,ユーティリティ
価格: 無料 (Michinari YAMAMOTO)

ただ個人的には、検索語と置換語を一つの画面で入力したい。出来れば正規表現が使えると嬉しい。そんな要望が湧いてきたので、組み直して新しくしてみました。

MemoFlowy経由で登録→ http://tinyurl.com/jjzn839

使い方

入力欄は二つ。「from」に対象とする単語を入れ、「to」に置き換える単語を書きます。Enterで入力欄を移動。「Replace」をタップすれば一括置換します。

スクリプト本体

現バージョンのHandyFlowyはソースの編集が出来ます。機能拡張スクリプト一覧で「編集」にしてからスクリプトをタップ。するとソース表示に切り替わります。

d=document;
listwidth=320;
listleft=(window.innerWidth-listwidth)/2;
html="<br>RepAll<br><br><input style=font-size:medium;width:260px;height:30px; type=text id=line1 onkeydown=KeyOn() placeholder=from><br><br><input style=font-size:medium;width:260px;height:30px; type=text id=line2 onkeydown=KeyOn() placeholder=to><br><br><div style=margin-left:40px;><div style=float:left;color:red;padding:20px; onclick=Go(0)>cancel</div><div style=padding:20px; onclick=Go(1)>Replace</div></div>";

e=d.createElement("div");
e.innerHTML=html;
e.style.cssText="color:black;background:beige;font-family:Hiragino Sans;font-size:medium;font-weight:bold;position:fixed;text-align:center;top:30%;left:"+listleft+"px;width:"+listwidth+"px;z-index:99;box-shadow:5px 5px 5px 5px rgba(0,0,0,0.2);";
d.body.appendChild(e);

function KeyOn(){
  if(event.keyCode==13) (d.activeElement.id=="line2")? line2.blur():line2.focus();
}

function Go(x){
  word1=new RegExp(line1.value,"ig");
  word2=line2.value;
  d.body.removeChild(e);
  if(x){
    p=pageContainer.querySelectorAll(".content");
    for(i=0;i<p.length;i++){
     s=p[i];
      s.textContent=s.textContent.replace(word1,word2);
     s.contentEditable=true;
     s.focus();
    }
  }
};

まとめ

正規表現ってたまに予想外の変換をしちゃうんですよね。そんなキマらなかったときでも、Undoで戻せるのがHandyFlowyの良いところ。推敲は試行錯誤。プログラムの変数を書き換えるのがほんと、楽になりました。どんどんエディタらしくなってきています。