置換例:HTMLタグを消す

正規表現 メタ文字

文字説明
.任意の１文字
+直前の文字が１回以上繰り返す
*直前の文字が０回以上繰り返す
?直前の文字が０個か１個
+?直前の文字が１回以上繰り返す
*?直前の文字が０回以上繰り返す
??直前の文字が０個か１個
{n}直前の文字の桁数を指定
{n,}直前の文字の最小桁数のみ指定
{n,m}直前の文字の最小桁数と最大桁数を指定
{n,m}?直前の文字の最小桁数と最大桁数を指定
[]角括弧に含まれるいずれか１文字にマッチ
-範囲指定
^角括弧に含まれる文字以外にマッチ（否定）
&&共通
()列挙
||いずれかの条件(OR条件)
\直後の正規表現記号をエスケープ
\s空白
\dすべての数字（１０進数字）
\Dすべての数字以外の文字（非１０進数字）
\s垂直タブ以外のすべての空白文字（空白文字）
\Sすべての非空白文字（非空白文字）
\wアルファベット、アンダーバー、数字（単語構成文字）
\Wアルファベット、アンダーバー、数字以外の文字（非単語構成文字）
^直後の文字が行の先頭にある
$直前の文字が行の末尾にある
<単語の先頭
>単語の末尾
\b単語の先頭か末尾
\B単語の先頭か末尾以外
\Aファイルの先頭
\zファイルの末尾
\G直前の一致文字列の末尾
view source

JavaScript

document.title = '文字列の検索・置換 (正規表現可)';

const replace = (v, sText, rText) => {
  var reg = new RegExp(sText, 'img');
  v = v.replace(reg, rText);
  return v;
}

$(function(){
  var v = '<a href=".">link</a><i>icon</i>';
  var sText = '(<.+?>)([^<]+)(</.+?>)';
  var rText = '[$2]';
  var $h1 = $('<h1>').text(document.title);
  var $input = $('<textarea>',{id:'input',placeholder:'入力'}).val(v);
  var $output = $('<textarea>',{id:'input',placeholder:'出力'});
  var $search = $('<input>',{id:'search',placeholder:'検索(正規表現可)'}).val(sText);
  var $btn = $('<button>').text('検索・置換');
  var $replace = $('<input>',{id:'replace',placeholder:'置換'}).val(rText);
  $('#demo')
    .prepend($h1)
  $('#form')
    .append($input)
    .append($search)
    .append($replace)
    .append($btn)
    .append($output);
  
  const conv = ()=>{
    var v = $input.val();
    var sText = $search.val() || '';
    var rText = $replace.val() || '';
    var v = replace(v, sText, rText);
    $output.val(v);
  }

  conv();
  $btn.on('click', function(){
    conv();
  });
});

CSS

#demo{
  height:100%;
}
#input{
  font-size:24px;
  width:99%;
  height:40vh;
}
input{
  font-size:24px;
  width:48%;
  height:2em;
}
button{
  font-size:24px;
  width:99%;
  height:2em;
}
#output{
  font-size:24px;
  width:99%;
  height:40vh;
}

table{
  width:99%;
}
tr:nth-child(odd){
  background-color: #eee;
}
th,td{
  border:1px solid #333;
  padding:4px;
  min-width:40px;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-text-search-replace-regexp/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。