Comment puis-je effectuer un str_replace en JavaScript, en remplaçant du texte en JavaScript?


137

Je souhaite utiliser str_replaceou une alternative similaire pour remplacer du texte en JavaScript.

var text = "this is some sample text that i want to replace";
var new_text = replace_in_javascript("want", "dont want", text);
document.write("new_text");

devrait donner

this is some sample text that i dont want to replace

Si vous envisagez d'utiliser une expression régulière, quelles sont les implications sur les performances par rapport aux méthodes de remplacement intégrées.


3
Personne n'a remarqué que PHP str_replaceaccepte également deux tableaux de la même longueur, où chaque chaîne du premier tableau est remplacée par la chaîne du deuxième tableau au même index. Veuillez consulter stackoverflow.com/a/5069776/296430 pour la seule fonction correcte que j'ai trouvée jusqu'à présent qui imite ce comportement exact en javascript.
Jules Colle

2
@JulesColle cette réponse échoue souvent - voyez pourquoi / quand elle échoue et une meilleure solution ici: stackoverflow.com/a/37949642/445295
Stephen M. Harris

1
Si vous voulez une compatibilité élevée - y compris des bizarreries - avec la version php ... jetez un œil à github.com/kvz/locutus/blob/master/src/php/strings/…
Doug Coburn

Réponses:


12

L'utilisation de regex pour le remplacement de chaîne est beaucoup plus lente que celle d'un remplacement de chaîne.
Comme démontré sur JSPerf , vous pouvez avoir différents niveaux d'efficacité pour créer une expression régulière, mais tous sont nettement plus lents qu'un simple remplacement de chaîne. L'expression régulière est plus lente car :

Les correspondances de chaînes fixes n'ont pas de retour en arrière, d'étapes de compilation, de plages, de classes de caractères ou d'une foule d'autres fonctionnalités qui ralentissent le moteur d'expression régulière. Il existe certainement des moyens d'optimiser les correspondances regex, mais je pense qu'il est peu probable que l'indexation dans une chaîne soit meilleure dans le cas courant.

Pour un test simple sur la page JS perf, j'ai documenté certains des résultats:

<script>
// Setup
  var startString = "xxxxxxxxxabcxxxxxxabcxx";
  var endStringRegEx = undefined;
  var endStringString = undefined;
  var endStringRegExNewStr = undefined;
  var endStringRegExNew = undefined;
  var endStringStoredRegEx = undefined;      
  var re = new RegExp("abc", "g");
</script>

<script>
// Tests
  endStringRegEx = startString.replace(/abc/g, "def") // Regex
  endStringString = startString.replace("abc", "def", "g") // String
  endStringRegExNewStr = startString.replace(new RegExp("abc", "g"), "def"); // New Regex String
  endStringRegExNew = startString.replace(new RegExp(/abc/g), "def"); // New Regexp
  endStringStoredRegEx = startString.replace(re, "def") // saved regex
</script>

Les résultats pour Chrome 68 sont les suivants:

String replace:    9,936,093 operations/sec
Saved regex:       5,725,506 operations/sec
Regex:             5,529,504 operations/sec
New Regex String:  3,571,180 operations/sec
New Regex:         3,224,919 operations/sec

Par souci d'exhaustivité de cette réponse (empruntée aux commentaires), il convient de mentionner que .replacene remplace que la première instance du caractère correspondant. Il est uniquement possible de remplacer toutes les instances par //g. Le compromis entre les performances et l'élégance du code pourrait être considéré comme pire si le remplacement de plusieurs instances name.replace(' ', '_').replace(' ', '_').replace(' ', '_');ou pirewhile (name.includes(' ')) { name = name.replace(' ', '_') }


C'est intéressant et logique que le remplacement de chaîne pure soit plus rapide que l'expression régulière. Cela vaut probablement la peine de mentionner (comme dans certaines réponses) que .replacene remplace que la première instance du caractère correspondant. Il est uniquement possible de remplacer toutes les instances par //g. Le compromis de performance pourrait être considéré comme pire si le remplacement de plusieurs instances name.replace(' ', '_').replace(' ', '_').replace(' ', '_');ou pirewhile (name.includes(' ')) { name = name.replace(' ', '_') }
Lex

201

Vous utiliseriez la replaceméthode:

text = text.replace('old', 'new');

Le premier argument est ce que vous recherchez, évidemment. Il peut également accepter des expressions régulières.

N'oubliez pas que cela ne change pas la chaîne d'origine. Il ne renvoie que la nouvelle valeur.


4
Merci beaucoup pour le 'ça ne fait que revenir et ne change pas'! C'est pour ça que je me déchirais les cheveux pendant longtemps jusqu'à ce que je tombe sur votre commentaire ...
Aditya MP

70
string.replace ('old', 'new') ne remplacera que la première instance de 'old' dans la chaîne. l'utilisation d'une expression régulière avec le drapeau 'g' comme dans la réponse de realmag777 remplacera toutes les instances de la chaîne. text = text.replace (/ old / g, 'new') remplacera toutes les instances de 'old'
WNRosenberg

1
que diriez-vous pas sensible à la casse?
Netorica le

7
^ text.replace (/ old / gi, 'new') remplacera toutes les instances de 'old' par 'new' non sensible à la casse (par exemple 'OLD' et 'oLd' seront également remplacés)
arnoudhgz


84

Plus simplement:

city_name=city_name.replace(/ /gi,'_');

Remplace tous les espaces par '_'!


10
c'est une traduction plus précise de ce que fait "str_replace" (global). La réponse choisie ne remplacera que la première instance.
rICh

1
N'oubliez pas d'échapper les caractères, surtout si vous remplacez hex échappé: \ x27 par exemple serait.replace(/\\x3B/g,';')
dmayo

18

Toutes ces méthodes ne modifient pas la valeur d'origine, retourne de nouvelles chaînes.

var city_name = 'Some text with spaces';

Remplace le 1er espace par _

city_name.replace(' ', '_'); // Returns: Some_text with spaces

Remplace tous les espaces par _ à l'aide de regex. Si vous avez besoin d'utiliser regex, je vous recommande de le tester avec https://regex101.com/

city_name.replace(/ /gi,'_');  // Returns: Some_text_with_spaces 

Remplace tous les espaces par _ sans regex . Manière fonctionnelle.

city_name.split(' ').join('_');  // Returns: Some_text_with_spaces

16

Vous devriez écrire quelque chose comme ça:

var text = "this is some sample text that i want to replace";
var new_text = text.replace("want", "dont want");
document.write(new_text);

14

Le code que les autres vous donnent ne remplace qu'une seule occurrence, tandis que l'utilisation d'expressions régulières les remplace toutes (comme @sorgit l'a dit). Pour remplacer tous les "veulent" par "ne veulent pas", utilisez ce code:

var text = "this is some sample text that i want to replace";
var new_text = text.replace(/want/g, "dont want");
document.write(new_text);

La variable "new_text" se traduira par "ceci est un exemple de texte que je ne veux pas remplacer".

Pour obtenir un guide rapide sur les expressions régulières, allez ici:
http://www.cheatography.com/davechild/cheat-sheets/regular-expressions/
Pour en savoir plus str.replace(), allez ici:
https://developer.mozilla.org/ fr-FR / docs / JavaScript / Reference / Global_Objects / String / replace
Bonne chance!


14

cette fonction ne remplace qu'une seule occurrence .. si vous devez remplacer plusieurs occurrences, vous devriez essayer cette fonction: http://phpjs.org/functions/str_replace:527

Pas nécessairement. voir la réponse de Hans Kesting:

city_name = city_name.replace(/ /gi,'_');

8

hm .. Avez-vous coché replace ()?

Votre code ressemblera à ceci

var text = "this is some sample text that i want to replace";
var new_text = text.replace("want", "dont want");
document.write(new_text);

7
var new_text = text.replace("want", "dont want");

7

En JavaScript, vous appelez la replaceméthode sur l'objet String, par exemple "this is some sample text that i want to replace".replace("want", "dont want"), qui retournera la chaîne remplacée.

var text = "this is some sample text that i want to replace";
var new_text = text.replace("want", "dont want"); // new_text now stores the replaced string, leaving the original untouched

7

JavaScript a une replace()méthode d'objet String pour remplacer les sous-chaînes. Cette méthode peut avoir deux arguments. Le premier argument peut être une chaîne ou un modèle d'expression régulière (objet regExp) et le second argument peut être une chaîne ou une fonction. Un exemple de replace()méthode ayant les deux arguments de chaîne est présenté ci-dessous.

var text = 'one, two, three, one, five, one';
var new_text = text.replace('one', 'ten');
console.log(new_text)  //ten, two, three, one, five, one

Notez que si le premier argument est la chaîne, seule la première occurrence de la sous-chaîne est remplacée comme dans l'exemple ci-dessus. Pour remplacer toutes les occurrences de la sous-chaîne, vous devez fournir une expression régulière avec un gindicateur (global). Si vous ne fournissez pas l'indicateur global, seule la première occurrence de la sous-chaîne sera remplacée même si vous fournissez l'expression régulière comme premier argument. Remplaçons donc toutes les occurrences de onedans l'exemple ci-dessus.

var text = 'one, two, three, one, five, one';
var new_text = text.replace(/one/g, 'ten');
console.log(new_text)  //ten, two, three, ten, five, ten

Notez que vous n'entourez pas le modèle d'expression régulière de guillemets, ce qui en fera une chaîne et non un objet regExp. Pour effectuer un remplacement insensible à la casse, vous devez fournir un indicateur supplémentaire iqui rend le modèle insensible à la casse. Dans ce cas, l'expression régulière ci-dessus sera /one/gi. Notez le idrapeau ajouté ici.

Si le deuxième argument a une fonction et s'il y a une correspondance, la fonction est passée avec trois arguments. Les arguments obtenus par la fonction sont la correspondance, la position de la correspondance et le texte d'origine. Vous devez renvoyer par quoi cette correspondance doit être remplacée. Par exemple,

var text = 'one, two, three, one, five, one';
var new_text = text.replace(/one/g, function(match, pos, text){
return 'ten';
});
console.log(new_text) //ten, two, three, ten, five, ten

Vous pouvez avoir plus de contrôle sur le texte de remplacement en utilisant une fonction comme deuxième argument.


2
Vous êtes le seul à mentionner la fonction à l'intérieur de la capacité de remplacement
Emeeus

4

Vous pouvez utiliser

text.replace('old', 'new')

Et pour changer plusieurs valeurs dans une chaîne à la fois, par exemple pour changer # en chaîne v et _ en chaîne w:

text.replace(/#|_/g,function(match) {return (match=="#")? v: w;});

3

Si vous voulez vraiment un équivalent de PHP, str_replacevous pouvez utiliser Locutus . La version de PHP de str_replacesupport plus d'options que ce que le JavaScript String.prototype.replaceprend en charge. Par exemple, les balises:

//PHP
$bodytag = str_replace("%body%", "black", "<body text='%body%'>");
//JS with Locutus
var $bodytag = str_replace(['{body}', 'black', '<body text='{body}'>')  

ou tableau

//PHP
$vowels = array("a", "e", "i", "o", "u", "A", "E", "I", "O", "U");
$onlyconsonants = str_replace($vowels, "", "Hello World of PHP");
//JS with Locutus
var $vowels = ["a", "e", "i", "o", "u", "A", "E", "I", "O", "U"];
var $onlyconsonants = str_replace($vowels, "", "Hello World of PHP");

De plus, cela n'utilise pas regex à la place, il utilise pour les boucles. Si vous ne voulez pas utiliser de regex mais que vous voulez un simple remplacement de chaîne, vous pouvez utiliser quelque chose comme ça (basé sur Locutus)

function str_replace (search, replace, subject) {

  var i = 0
  var j = 0
  var temp = ''
  var repl = ''
  var sl = 0
  var fl = 0
  var f = [].concat(search)
  var r = [].concat(replace)
  var s = subject
  s = [].concat(s)

  for (i = 0, sl = s.length; i < sl; i++) {
    if (s[i] === '') {
      continue
    }
    for (j = 0, fl = f.length; j < fl; j++) {
      temp = s[i] + ''
      repl = r[0]
      s[i] = (temp).split(f[j]).join(repl)
      if (typeof countObj !== 'undefined') {
        countObj.value += ((temp.split(f[j])).length - 1)
      }
    }
  }
  return s[0]
}
var text = "this is some sample text that i want to replace";

var new_text = str_replace ("want", "dont want", text)
document.write(new_text)

pour plus d'informations, voir le code source https://github.com/kvz/locutus/blob/master/src/php/strings/str_replace.js


2

Il y a déjà plusieurs réponses en utilisant str.replace () (ce qui est assez juste pour cette question) et regexmais vous pouvez utiliser une combinaison de str.split () et join () ensemble, ce qui est plus rapide que str.replace()etregex .

Voici un exemple de travail:

var text = "this is some sample text that i want to replace";

console.log(text.split("want").join("dont want"));


2

Vous avez les options suivantes:

  1. Remplacer la première occurrence

var text = "this is some sample text that i want to replace and this i WANT to replace as well.";
var new_text = text.replace('want', 'dont want');
// new_text is "this is some sample text that i dont want to replace and this i WANT to replace as well"
console.log(new_text)

  1. Remplacer toutes les occurrences - sensible à la casse

var text = "this is some sample text that i want to replace and this i WANT to replace as well.";
var new_text = text.replace(/want/g, 'dont want');
// new_text is "this is some sample text that i dont want to replace and this i WANT to replace as well
console.log(new_text)

  1. Remplacer toutes les occurrences - insensible à la casse

var text = "this is some sample text that i want to replace and this i WANT to replace as well.";
var new_text = text.replace(/want/gi, 'dont want');
// new_text is "this is some sample text that i dont want to replace and this i dont want to replace as well
console.log(new_text)

Plus d'infos -> ici


2

En Javascript, remplacez la fonction disponible pour remplacer la sous-chaîne de la chaîne donnée par une nouvelle. Utilisation:

var text = "this is some sample text that i want to replace";
var new_text = text.replace("want", "dont want");
console.log(new_text);

Vous pouvez même utiliser une expression régulière avec cette fonction. Par exemple, si vous souhaitez remplacer toutes les occurrences de ,par ..

var text = "123,123,123";
var new_text = text.replace(/,/g, ".");
console.log(new_text);

Ici, le gmodificateur est utilisé pour correspondre globalement à toutes les correspondances disponibles.


2

Méthode d' replace substring in a sentenceutilisation de React:

 const replace_in_javascript = (oldSubStr, newSubStr, sentence) => {
    let newStr = "";
    let i = 0;
    sentence.split(" ").forEach(obj => {
      if (obj.toUpperCase() === oldSubStr.toUpperCase()) {
        newStr = i === 0 ? newSubStr : newStr + " " + newSubStr;
        i = i + 1;
      } else {
        newStr = i === 0 ? obj : newStr + " " + obj;
        i = i + 1;
      }
    });
    return newStr;
  };

RunMethodHere


2

Si vous ne voulez pas utiliser regex, vous pouvez utiliser cette fonction qui remplacera tout dans une chaîne

Code source:

function ReplaceAll(mystring, search_word, replace_with) 
{
    while (mystring.includes(search_word))
    {
        mystring = mystring.replace(search_word, replace_with);
    }

    return mystring;  
}

Comment utiliser:

var mystring = ReplaceAll("Test Test", "Test", "Hello"); 

2

Utiliser le String.prototype.replacepremier argument JS doit être un modèle Regex ou une chaîne et le deuxième argument doit être une chaîne ou une fonction.

str.replace(regexp|substr, newSubStr|function);

Ex:

var str = 'this is some sample text that i want to replace'; var newstr = str.replace(/want/i, "dont't want"); document.write(newstr); // this is some sample text that i don't want to replace


0
function str_replace($old, $new, $text)
{
   return ($text+"").split($old).join($new); 
}

Vous n'avez pas besoin de bibliothèques supplémentaires.


-1

Ajout d'une méthode replace_in_javascriptqui satisfera votre exigence. Nous avons également constaté que vous écrivez une chaîne "new_text"dans document.write()laquelle est censée faire référence à une variable new_text.

let replace_in_javascript= (replaceble, replaceTo, text) => {
  return text.replace(replaceble, replaceTo)
}

var text = "this is some sample text that i want to replace";
var new_text = replace_in_javascript("want", "dont want", text);
document.write(new_text);

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.