Remplacer les multiples cordes à la fois

Est facile équivalent à ceci en JavaScript?

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

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

C'est à l'aide de PHP str_replace, qui vous permet d'utiliser un tableau de mots à rechercher et remplacer. Puis-je faire quelque chose comme ceci à l'aide de JavaScript /jQuery?

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

//string replace here

$("#output").html(textarea);
...
  • Juste pour clarifier, vous faites ça pour échapper html?
  • De multiples remplacer au lieu d'une seule remplacer? Si vous voulez faire quelque chose comme ça de manière efficace, vous avez besoin d'une expression régulière. Ce n'est pas ce que la réponse sélectionnée est en train de faire.
  • Voir ce la poste, je pense que c'est ce que vous cherchez
InformationsquelleAutor Tim | 2011-02-21
  1. 79

    Vous pouvez étendre la Chaîne de l'objet avec votre propre fonction qui fait ce que vous avez besoin (utile s'il y a des fonctionnalités manquantes):

    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;
};

    Mondial pour les remplacer, vous pouvez utiliser les regex:

    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;
};

    L'utilisation de la fonction qu'il serait similaire à votre PHP exemple:

    var textarea = $(this).val();
var find = ["<", ">", "\n"];
var replace = ["&lt;", "&gt;", "<br/>"];
textarea = textarea.replaceArray(find, replace);
    • Merci bob, en supposant que c'est à l'aide de prototype(?) voulez-vous savoir comment le faire, à l'aide de jQuery?
    • C'est régulier, JavaScript, pas de bibliothèque nécessaires. JavaScript est un des prototypes de la langue ce qui signifie que chaque objet a un prototype, il hérite. Ajouter au prototype de l'objet est simplement une façon d'étendre à tous ces objets.
    • Comment aurais-je puis appeler la fonction, veuillez Bob? Ou serais-je pas? merci beaucoup 🙂
    • Voir mon edit pour ma réponse
    • Génial. Merci Bob 🙂
    • Bob, à ce sujet, comment puis-je faire en sorte que la recherche et le remplacement global - pour chaque occurrence de la "trouvé" des matches? Merci
    • Ok, voir modifier à nouveau 🙂
    • Désolé de t'énerve, mais j'essaie d'insérer des balises html où j'ai personnalisé pour un simple éditeur de texte riche, je suis en train de faire, mais à l'aide de votre code, je suis toujours avoir des problèmes 🙁 auriez-vous l'esprit à tous d'avoir un regard...? tiny.cc/f28jq
    • Quels sont les problèmes rencontrez-vous?
    • "tar pit".replaceArray(['tar', 'fosse'], ['capitale', 'maison']) // "cahouseol maison"
    • Cette solution ne fonctionne pas pour la suivante: String: "Le chat frappe le chien" trouver de tableau: ['cat', 'chien'] remplacer tableau: ["chien, 'cat']
    • La fonction ni de travail pour les chaînes qui contient RegExp caractères, par exemple: trouver array ["(", ")"] remplacer array ["[", "]"]
    • Pour permettre à la fonction de recevoir un tableau ou tout simplement une chaîne à remplacer, vous pouvez utiliser: replaceString = replaceString.remplacer(regex, typeof(remplacer)=='object'? remplacer[i]: remplacer);
    • Ce n'est pas la bonne solution @RyanOHara; voir stackoverflow.com/a/34560648/445295 ou stackoverflow.com/a/37949642/445295 pour des réponses précises.
    • c'est pourquoi javascript ressemble un sucky langage pour moi !
    • PARFAIT! Merci beaucoup
    • Recommander à changer replaceString = this; à replaceString = this.valueOf();, sinon, si find est vide, la fonction retourne un Objet de type string à la place de la chaîne primitive.

    InformationsquelleAutor Bob
  2. 31

    Erreur Commune

    Presque toutes les réponses sur cette page, utilisation cumulative de remplacement et donc de subir le même défaut, le remplacement des chaînes sont eux-mêmes l'objet d'un remplacement. Voici quelques exemples où ce modèle échoue (h/t @KurokiKaze @derekdreery):

    JS:

    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'] ) );

    Solution

    JS:

    function replaceBulk( str, findArray, replaceArray ){
  var i, regex = [], map = {}; 
  for( i=0; i<findArray.length; i++ ){ 
    regex.push( findArray[i].replace(/([-[\]{}()*+?.\\^$|#,])/g,'\\\') );
    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'] ) );

    Remarque:

    C'est plus compatible avec la variation de @elchininet de solution, qui utilise map() et Array.indexOf() et donc ne fonctionne pas avec IE8 et plus.

    @elchininet de la mise en œuvre détient plus vrai de PHP str_replace(), car il permet aussi de chaînes de caractères comme des rechercher/remplacer les paramètres, et utilisera le premier à trouver la matrice de correspondance si il y a des doublons (ma version sera la dernière). Je n'ai pas accepter des chaînes dans cette mise en œuvre, parce que l'affaire est déjà géré par JS intégré dans String.replace().

    • Ce doit être la accepté de répondre.
    • Cool réponse, vous avez remarqué aussi que presque toutes les réponses dans la page à l'aide cumulée de remplacement.
    • Cela ne fonctionne pas lors du remplacement des caractères comme des crochets. Par exemple, il est courant d'utiliser ((espace réservé)) les balises de style et cela va le remplacer ceux ((undefined)) jsfiddle.net/oLfmeaa6/1
    • fixe! Eu à mettre à jour la regex qui s'échappe spécial regex caractères (qui vient de sons bug sujettes à :D). Merci pour cela!
    • L'amour de ce code. Addendum: je l'ai changé pour replaceBulk(str, obj) {var findArray = Objet.les touches(obj), var replaceArray = Objet.valeurs(obj);....} Donc, je peux passer dans un simple hash-object of {"x":"y",...} de remplacement. Semble plus facile à maintenir.
    • Le tableau double entrées sont plus vrai de PHP str_replace() il était destiné à émuler -- mais cela mis à part, je préfère l'objet d'entrée trop! Il suffit de garder à l'esprit Object.values ne fonctionne pas dans IE sans un polyfill.

    InformationsquelleAutor Stephen M. Harris
  3. 17
    text = text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
    • Ce n'est pas "à la fois". Fondamentalement le même que celui de "one-liner": texte = texte.remplacer(foo); texte = texte.remplacer(bar);
    • Pour être juste, l'on a accepté la réponse n'est pas "à la fois", il vient se cache l', les remplacements derrière une fonction.
    InformationsquelleAutor hsz
  4. 9

    Vous pouvez utiliser la méthode replace de la String objet avec une fonction dans le deuxième paramètre:

    Première Méthode (à l'aide d'un rechercher et remplacer Objet)

    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

    Deuxième méthode (à l'aide de deux tableaux, rechercher et remplacer)

    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

    De fonction souhaitée:

    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);

    MODIFIER

    Ce function admet une String ou un Array comme paramètres:

    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)]});
}
    • a l'air cool, mais ne fonctionne pas dans certains cas 🙁 . par exemple, {'[0-1]':'NUM'}
    • Salut @Soyoes, dites-moi dans ce cas, il échoue et que je vais essayer de corriger ça.
    • Salut @Soyoes, je l'ai testé et ça fonctionne: [jsfiddle] (jsfiddle.net/uxv2u9n0)
    • Salut , j'ai essayé quelque chose comme ceci {'Ma':'Votre', '[0-1]':'NUM'} avec str "Mon nom est Pierre, je Suis 19", à l'aide de la méthode 1.
    • Cette méthode consiste à rechercher et remplacer Strings ou Array de Strings. Il fonctionne pas avec les expressions régulières, si vous souhaitez utiliser une RegExp comme un paramètre de recherche, vous devez analyser les trouver Array de le convertir en RegExp. Je vais vous donner un exemple, dans un couple de minutes.
    • Salut @Soyoes, quelque chose comme ceci: jsfiddle
    • Merci @elchininet, je pense qu'il fonctionne dans la plupart des cas, et c'est un assez cool réponse 🙂

    InformationsquelleAutor ElChiniNet
  5. 8

    Une approche plus visuelle:

    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];
  });
};

    et ce est la façon dont vous l'appelez:

    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;
    • Erreur: ce.remplacer n'est pas une fonction !
    InformationsquelleAutor Utopik
  6. 4

    Vous voudrez peut-être chercher dans une bibliothèque JS appelé phpJS.

    Il vous permet d'utiliser la fonction str_replace, de la même manière que vous pouvez l'utiliser en PHP. Il y a aussi beaucoup plus de fonctions php "porté" sur JavaScript.

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

    InformationsquelleAutor Matt Rardon
  7. 3
    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
    • Ce prototype ne fonctionne pas si vous saisissez ces vars: var find = [".",","]; var replace = [',', '.'];
    InformationsquelleAutor user1925159
  8. 2

    Il n'y a aucun moyen de le faire en un seul appel de méthode, vous devrez soit de la chaîne d'appels, ou écrire une fonction qui manuellement le fait ce dont vous avez besoin.

    var s = "<>\n";
s = s.replace("<", "&lt;");
s = s.replace(">", "&gt;");
s = s.replace("\n", "<br/>");
    • J'aime les choses simples. A la recherche d'une fonction similaire à partir de php. OK, copie-le passé - mais 3 lignes - n un entier prototype de la fonction.
    InformationsquelleAutor Bryan Kyle
  9. 2

    Pour les tags, vous devriez être en mesure de simplement définir le contenu avec .text() au lieu de .html().

    Exemple: http://jsfiddle.net/Phf4u/1/

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

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

    ...ou si vous avez juste voulu supprimer la <br> éléments, vous pourriez se débarrasser de la .replace(), et temporairement, de faire d'eux des éléments du DOM.

    Exemple: http://jsfiddle.net/Phf4u/2/

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

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

$("#output").text(textarea);
    InformationsquelleAutor user113716
  10. 1

    Haut réponse est équivalent à:

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

    Donné ceci:

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

    Dans ce cas, pas de la programmation impérative est en cours.

    InformationsquelleAutor Jose Canizares
  11. 1

    À l'aide de ES6:
    Il existe de nombreuses façons de search pour les cordes et les replace dans JavaScript. L'un d'eux est comme suit

    JS:

    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);

    InformationsquelleAutor Niraj Kaushal
  12. 0

    Une méthode serait:

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

    J'ai eu un cas où j'ai dû supprimer des caractères à partir d'une chaîne et il l'a fait comme ceci:

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

    Aurait été extra soigné si les cordes étaient en soi des tableaux de caractères en javascript, de sorte que nous n'aurions pas besoin de ces split/join, comme newName = fileName.filter((chr) => badChars.indexOf(chr) === -1) mais je pense toujours que c'est clair et lisible si vous avez à traiter avec des personnages et pas susbstrings.

    InformationsquelleAutor Alex