[Javascript] 文字列置換が困難な場合の最終手段方法

先日、Bloggerを使ってホームページを納品するお仕事案件があり、 未だに難解な箇所の多い、BloggerXMLと闘いながら納品までこぎつけることができました。 その作業の中で非常に不思議な現象に出会いました。 とある文字列を取得して、全角スペースを半角スペースに変換するという処理だったのですが、Bloggerページ内で実行されるJavascriptでは、 全角文字列が正常に半角に置換されないという事象がありました。 おそらくJavascriptを普段から使っている人は、replace()関数を使ったり、split()関数からのjoin()関数の連携方法などを思いつくと思いますが、 それらだとどうあがいても置換することができませんでした。（何故か原因はいまのところ不明・・・） そして、そんな頑固に置換できない状態をどうやって脱したかをブログに残しておきたいと思います。

事象報告

仕事の案件だったので、具体的な事は書けないのですが、今回の事象が発生したのは、GoogleBloggerの記事の中で、scriptタグを書いてその中で文字列の変換を行うという環境です。 ちなみに、このブログもGoogleBloggerなので、再現してみると・・・ 次の文字の中間に全角スペースを置いてみます。 あいうえお　かきくけこ これを、次の方法で全角スペースを半角スペースに置換してみます。 "あいうえお　かきくけこ".replace(/　/g," ") ※ただ、半角スペースだと分かりにくいので、_（アンダースコア）に変換します。

こちらはうまく変換できました。

条件の絞り込み

実は、取得した文字列は、ページ内で作り出したものではなく、別ページをスクレイピングしてきた文字列だったんですね。 先日このブログでも紹介した方法を使って、取得した文字列でした。 参考 : サーバーレスでWebスクレイピングする方法 ただ、取得した文字コードを調べても全角スペースだったんですよね・・・

文字列置換するパターン

replace

上記にも書いたreplaceを使って、文字列内の文字を一括で全て変換する方法です。 正規表現部分の/gのgを書かないと、最初の1個しか置換されません。 "abcabcabc".replace(/a/g,"_") > _bc_bc_bc

split~join

repaceで、正規表現を書くのが面倒くさい場合に、たまに次のように文字列置換を行うことができます。 "abcabcabc".split("a").join("_") > _bc_bc_bc 処理メモリの使い方としては、replaceの方がいいと思いますが、文字列のみで処理できるので、この方法は初心者の人に向いているかもしれませんね。

最終手段の方法

今回の症状の対応は、上記2パターンを行っても全く解消できないため、そもそもの文字列値感の方法を変えるようにしてみました。 以下は、今回最終的に使った、文字列内の全角スペースを半角スペースに変換するコードです。 Array.from("文字列").map(e => e.charCodeAt(0)).map(e => {const a = e === 12288 ? 32 : e ;return String.fromCharCode(a)}).join("")

解説

文字列を一旦文字ごとの配列に変換して、その文字をそれぞれコード化しました。 途中記述の、12288は、全角スペースの文字コードで、32は、半角スペースの文字コードです。 文字コードを置換して、最後にコードを文字列に戻して全ての配列をjoinでstringに変換しています。 これで無事に変換が完了できたというお話でした。

あとがき

このブログを読んだ時に、「取得してきたサイトの文字コードが違ってたんじゃないの？」と思った人、 文字を文字コードに変換した時に、全角スペースはちゃんと12288の値になっていたので、何故コード以外の文字列置換ができなかったのか、本当に今でも不思議で、怪奇です。 何かの呪じゃないかと思って、お祓いしようかと考えたぐらいなんですよね。 でも、デジタルに呪などあるわけもないので、きっと今の時点では突き止められない原因が存在するんだろうな・・・と思います。 GASとBloggerの相性が悪いとか・・・ 同じGoogle同士なのにね。