空白を無視した置換処理

Question

javascript で検索文字列を強調しようと思い、置換処理を実施しています。

function highlight(text, words) {
    var i, len = words.length, re;
    for (i = 0; i < len; i++) {
        re = new RegExp(words[i], 'g');
        if (re.test(text)) {
        text = (text).replace(re, '<strong>$&</strong>');
        }
    }
    return text;
}

めちゃくちゃ便利なJavaScript オリジナル関数10選を参考に上記で実装していましたが、検索対象の空白を無視して置換したかったため、以下の様に変更しました。

function highlight(text, words) {
    var i, len = words.length, re;
    for (i = 0; i < len; i++) {
        re = new RegExp(words[i], 'g');
        if (re.test(text.replace(/\s+/g, ""))) {
        text = (text.replace(/\s+/g, "")).replace(re, '<strong>$&</strong>');
        }
    }
    return text;
}

当然ですが、全空白を削除してしまうため、意図した動作にはなりません。
常套手段がありそうな置換ですが、ちょっと探せませんでした。

うまいやり方があれば、ご教示いただけないでしょうか？
よろしくお願いいたします。

実現したい置換イメージ：
元文書１
ほげ ほげ ほげ 検索文字列 ほげ ほげ ほげ

元文書２
ほげ ほげ ほげ 検索 文字 列 ほげ ほげ ほげ

変換後→
ほげ ほげ ほげ <strong>検索文字列</strong> ほげ ほげ ほげ

Comments

[Zuishin]

変換後の例を見ると、空白全削除で良いように見えますが、意図しない変換というのはどういうものでしょうか？

[退会済みユーザー]

サンプルがわかりにくかったですかね。修正します。
要は、検索文字列以外の箇所の空白も削除してしまうということです。

[think49]

To: Zuishinさん、例えば、"foo -> piyo" の置換処理をする場合、"hoge f o o hoge" -> "hoge piyo hoge" のように置換することを期待しているものと想像します。"f o o" の語間の空白は無視しますが、hoge 間の空白はそのまま残します。

Answer 1

String#split

ごく素直に実装するなら、

re = new RegExp(words[i].split('').join('\\s*'), 'g');

正規表現メタキャラクタのエスケープ

しかし、正規表現のメタキャラクタを許す設計なのは意図的なのでしょうか。
個人的には Array#map でエスケープした方がいい気がします。

• escaperegexpchar.js: 正規表現文字列をエスケープします(ES5準拠)。エスケープ文字列は new RegExp() に渡すことができます。

更新履歴

• 2016/07/19 13:26 正規表現元の文字列修正('\s+' -> '\s*')
• 2016/07/19 15:11 正規表現元の文字列修正('\s*' -> '\\s*')

Re: te2ji さん

Comments

[moriyama]

横から失礼します。joinメソッドでエスケープされた文字列が一度展開されてしまうので、正しくは「re = new RegExp(words[i].split('').join('\\s*'), 'g');」かと思います。

[退会済みユーザー]

動作は理解できていませんが、お二方の回答で実装したい機能は満足できました。
動作理解後ですが、エスケープも考慮するように変更します。
取り急ぎお礼まで。ありがとうございました。

[退会済みユーザー]

理解できました。ありがとうございました。

[think49]

To: moriyama さん
ご指摘ありがとうございます。仰る通りでしたので親記事を修正しました。

Answer 2

まず元の文書の空白を取り除きます。

そして検索し、置換対象をリストに入れます。この場合だと、「検索文字列」一つのみリストに入ることになりますが、実際には複数になるでしょう。

これを加工します。まず正規表現のエスケープを行い、次に文字と文字のあいだに \s* を入れます。
「検索文字列」の場合は「検\s索\s文\s字\s列」となります。「注意」の場合は「*\s注\s意\s**」となります。

これを使って置換します。

Comments

[Zuishin]

これは、検索する文字列が正規表現であると仮定しての実装です。単なる文字列ならば、前半部分は不要です。

[退会済みユーザー]

think49 さんと同じイメージですかね？
ありがとうございました。

[Zuishin]

検索文字列がたとえば「検.[abc]字列」のような正規表現だと思っていました。
単なる文字列なら前半部分は不要で think49 さんと同じになります。

[退会済みユーザー]

理解できました。ありがとう。