web-dev-qa-db-ja.com

複数の文字列を一度に置き換える

JavaScriptでこれに簡単に相当するものはありますか？

$find = array("<", ">", "\n");
$replace = array("&lt;", "&gt;", "<br/>");

$textarea = str_replace($find, $replace, $textarea);

これは、PHPのstr_replace。単語の配列を使用して検索および置換できます。 JavaScript/jQueryを使用してこのようなことを行うことはできますか？

...
var textarea = $(this).val();

// string replace here

$("#output").html(textarea);
...
javascriptjqueryreplace
60
Tim

必要なことを行う独自の関数でStringオブジェクトを拡張できます（機能が不足している場合に便利です）。

String.prototype.replaceArray = function(find, replace) {
  var replaceString = this;
  for (var i = 0; i < find.length; i++) {
    replaceString = replaceString.replace(find[i], replace[i]);
  }
  return replaceString;
};

グローバル置換には、正規表現を使用できます。

String.prototype.replaceArray = function(find, replace) {
  var replaceString = this;
  var regex; 
  for (var i = 0; i < find.length; i++) {
    regex = new RegExp(find[i], "g");
    replaceString = replaceString.replace(regex, replace[i]);
  }
  return replaceString;
};

この関数を使用するには、PHPの例に似ています：

var textarea = $(this).val();
var find = ["<", ">", "\n"];
var replace = ["&lt;", "&gt;", "<br/>"];
textarea = textarea.replaceArray(find, replace);
79
Bob

よくある間違い

このページのほぼすべての回答は累積置換を使用しているため、置換文字列自体が置換の対象となるという同じ欠陥があります。このパターンが失敗する2つの例を次に示します（h/t @KurokiKaze @derekdreery）：

_function replaceCumulative(str, find, replace) {
  for (var i = 0; i < find.length; i++)
    str = str.replace(new RegExp(find[i],"g"), replace[i]);
  return str;
};

// Fails in some cases:
console.log( replaceCumulative( "tar pit", ['tar','pit'], ['capitol','house'] ) );
console.log( replaceCumulative( "you & me", ['you','me'], ['me','you'] ) );_

解決

_function replaceBulk( str, findArray, replaceArray ){
  var i, regex = [], map = {}; 
  for( i=0; i<findArray.length; i++ ){ 
    regex.Push( findArray[i].replace(/([-[\]{}()*+?.\\^$|#,])/g,'\\$1') );
    map[findArray[i]] = replaceArray[i]; 
  }
  regex = regex.join('|');
  str = str.replace( new RegExp( regex, 'g' ), function(matched){
    return map[matched];
  });
  return str;
}

// Test:
console.log( replaceBulk( "tar pit", ['tar','pit'], ['capitol','house'] ) );
console.log( replaceBulk( "you & me", ['you','me'], ['me','you'] ) );_

注：

これは@elchininetの solution のより互換性のあるバリエーションで、map()およびArray.indexOf()を使用するため、IE8以前では機能しません。

@elchininetの実装は、PHPのstr_replace()に忠実です。これは、文字列を検索/置換パラメーターとして使用でき、重複がある場合は最初の検索配列一致を使用します（私のバージョンでは最後を使用します）。この実装では文字列を受け入れませんでした。そのケースはすでにJSの組み込みString.replace()によって処理されているためです。

33
Stephen M. Harris
text = text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
17
hsz

2番目のパラメーターの関数でStringオブジェクトのreplaceメソッドを使用できます。

最初の方法（オブジェクトの検索と置換を使用）

var findreplace = {"<" : "&lt;", ">" : "&gt;", "\n" : "<br/>"};

textarea = textarea.replace(new RegExp("(" + Object.keys(findreplace).map(function(i){return i.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&")}).join("|") + ")", "g"), function(s){ return findreplace[s]});

jsfiddle

2番目の方法（2つの配列を使用して、検索と置換）

var find = ["<", ">", "\n"];
var replace = ["&lt;", "&gt;", "<br/>"];

textarea = textarea.replace(new RegExp("(" + find.map(function(i){return i.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&")}).join("|") + ")", "g"), function(s){ return replace[find.indexOf(s)]});

jsfiddle

望ましい機能：

function str_replace($f, $r, $s){
   return $s.replace(new RegExp("(" + $f.map(function(i){return i.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&")}).join("|") + ")", "g"), function(s){ return $r[$f.indexOf(s)]});
}

$textarea = str_replace($find, $replace, $textarea);

[〜＃〜] edit [〜＃〜]

このfunctionは、パラメータとしてStringまたはArrayを許可します。

function str_replace($f, $r, $s){
    return $s.replace(new RegExp("(" + (typeof($f) === "string" ? $f.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&") : $f.map(function(i){return i.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&")}).join("|")) + ")", "g"), typeof($r) === "string" ? $r : typeof($f) === "string" ? $r[0] : function(i){ return $r[$f.indexOf(i)]});
}
9
ElChiniNet

より視覚的なアプローチ：

String.prototype.htmlProtect = function() {
  var replace_map;

  replace_map = {
    '\n': '<br />',
    '<': '&lt;',
    '>': '&gt;'
  };

  return this.replace(/[<>\n]/g, function(match) { // be sure to add every char in the pattern
    return replace_map[match];
  });
};

そして、これはあなたがそれを呼ぶ方法です：

var myString = "<b>tell me a story, \n<i>bro'</i>";
var myNewString = myString.htmlProtect();

// &lt;b&gt;tell me a story, <br />&lt;i&gt;bro'&lt;/i&gt;
8
Utopik

PhpJSと呼ばれるJSライブラリを調べてください。

PHPでstr_replace関数を使用する場合と同様に、str_replace関数を使用できます。 JavaScriptに「移植」されたphp関数もたくさんあります。

http://phpjs.org/functions/str_replace:527

4
Matt Rardon
String.prototype.replaceArray = function (find, replace) {
    var replaceString = this;
    for (var i = 0; i < find.length; i++) {
        // global replacement
        var pos = replaceString.indexOf(find[i]);
        while (pos > -1) {
            replaceString = replaceString.replace(find[i], replace[i]);
            pos = replaceString.indexOf(find[i]);
        }
    }
    return replaceString;
};

var textT = "Hello world,,,,, hello people.....";
var find = [".",","];
var replace = ['2', '5'];
textT = textT.replaceArray(find, replace);
// result: Hello world55555 hello people22222
3
user1925159

タグについては、.text()の代わりに.html()を使用してコンテンツを設定できる必要があります。

例：http://jsfiddle.net/Phf4u/1/

_var textarea = $('textarea').val().replace(/<br\s?\/?>/, '\n');

$("#output").text(textarea);
_

...または_<br>_要素を単に削除したい場合は、.replace()を削除し、一時的にDOM要素にすることができます。

例：http://jsfiddle.net/Phf4u/2/

_var textarea = $('textarea').val();

textarea = $('<div>').html(textarea).find('br').remove().end().html();

$("#output").text(textarea);
_
2
user113716

1つのメソッド呼び出しでこれを行う方法はありません。呼び出しを連鎖させるか、必要なことを手動で行う関数を記述する必要があります。

var s = "<>\n";
s = s.replace("<", "&lt;");
s = s.replace(">", "&gt;");
s = s.replace("\n", "<br/>");
2
Bryan Kyle

ES6を使用：文字列にsearchを、replaceにJavaScriptを使用する方法は多数あります。それらの1つは次のとおりです

const findFor = ['<', '>', '\n'];

const replaceWith = ['&lt;', '&gt;', '<br/>'];

const originalString = '<strong>Hello World</strong> \n Let\'s code';

let modifiedString = originalString;

findFor.forEach( (tag, i) => modifiedString = modifiedString.replace(new RegExp(tag, "g"), replaceWith[i]) )

console.log('Original String: ', originalString);
console.log('Modified String: ', modifiedString);
1
Niraj Kaushal

一番上の答えは次のことと同等です：

let text = find.reduce((acc, item, i) => {
  const regex = new RegExp(item, "g");
  return acc.replace(regex, replace[i]);
}, textarea);

これを考えると：

var textarea = $(this).val();
var find = ["<", ">", "\n"];
var replace = ["&lt;", "&gt;", "<br/>"];

この場合、命令型プログラミングは行われていません。

1
Jose Canizares

文字列から文字を削除する必要がある場合があり、次のようにしました。

_ let badChars = ['å', 'ä', 'ö'];
 let newName = fileName.split("").filter((chr) => badChars.indexOf(chr) === -1).join("");
_

文字列が本質的にjavascriptの文字配列である場合、newName = fileName.filter((chr) => badChars.indexOf(chr) === -1)のようにそれらの分割/結合を必要としないようにすれば、非常にすっきりしていましたが、文字であり、サスストリングではありません。

0
Alex

1つの方法は次のとおりです。

var text = $(this).val();
text = text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
$("#output").html(text);
0
James Sumners