決まった文字以外を空白で埋めるにはどうしたらいいのでしょうか。

Question

var bun = This is a pen
(空白) pen
上記のようにPenだけだして、あとは、空白にして上の行にあるPenの下にPenを入れるには、
どうしたらいいのでしょうか。
bun.match(/pen/);で、Penは出てきますが、Penが先頭にきて、空白がうまく作れません。
Replaceを使ってみましたがだめでした。bun.replace(/^pen/," ")でもだめでした。

Answer 1

consoleに表示すればいいのでしょうか？

var keyword="pen";
var bun = "Carpenter opens a pen appended pencil case."
var result=bun.split(keyword).map(x=>x.replace(/[\S\s]/g," ")).join(keyword);
console.log(bun);
console.log(result);

Comments

[Chibichan]

ありがとうございます！

Answer 2

[1] 使用しているフォントが等幅フォントの場合、
現状半角スペースとして出力している文字を「 」に変更してみるといかがでしょうか?

参考URL:
https://www.benricho.org/symbol/tokusyu_01_usefull.html
https://blog.fenrir-inc.com/jp/2011/06/post_51.html

---

[2] 使用しているフォントが等幅フォントではない場合、
文字の幅がバラバラなので以下のようにする必要があるかもしれません。

<p>
  This is a pen
</p>
<p class="text-hide">
  This is a <span class="text-show">pen</span>
</p>

p {
  color: #000;
}
.text-hide {
  color: transparent;
}
.text-show {
  color: #000;
}

Answer 3

こんにちは

ご質問に挙げられているコードと同様に、正規表現を使った一例を回答します。与えられた bun に対して、指定した正規表現にマッチしない部分を空白にした文字列を bun2 として作ります。

const matches = [...bun.matchAll(/pen/g)];
const bun2 = [...bun].map((ch, i) => matches.every(m => i < m.index || i >= m.index + m[0].length) ? ' ' : ch).join('');

• 動作確認用サンプル1: https://codepen.io/jun68ykt/pen/yLOeYxX

以下のように、 matchAll に与える正規表現を修正することで、規則的な文字列のバリエーションにマッチさせて、それら以外の箇所を空白にすることもできます。

• 動作確認用サンプル2: https://codepen.io/jun68ykt/pen/PoNZZGG

ただし、上記のやり方だと、bun の各文字のインデクス i について、matches に含まれるマッチした区間に含まれていないかを、すべての区間について調べるところが無駄です。以下は、この無駄を行わないコードです。

let bun2 = '';
const matches = bun.matchAll(/pen/g);

for (const m of matches) {
  const spaces = ' '.repeat(m.index - bun2.length);
  bun2 += `${spaces}${m[0]}`;
}

bun2 += ' '.repeat(bun.length - bun2.length);

• 動作確認用サンプル3: https://codepen.io/jun68ykt/pen/NWNxxZM

以上、参考になれば幸いです。

Comments

[Chibichan]

ありがとうございます！

[jun68ykt]

どういたしまして ????　ちなみに、以下のように split を使う手もあります。

https://codepen.io/jun68ykt/pen/MWyKrPP?editors=0012