web-dev-qa-db-de.com

Ersetzen Sie mehrere Zeichenfolgen gleichzeitig

Gibt es in JavaScript ein einfaches Äquivalent dazu?

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

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

Dies verwendet PHP str_replace, mit dem Sie ein Array von Wörtern zum Suchen und Ersetzen verwenden können. Kann ich so etwas mit JavaScript/jQuery machen?

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

// string replace here

$("#output").html(textarea);
...
58
Tim

Sie können das String-Objekt mit einer eigenen Funktion erweitern, die das tut, was Sie benötigen (nützlich, wenn Funktionalität fehlt):

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

Für globale Ersetzung können Sie Regex verwenden:

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

Um die Funktion zu verwenden, ähnelt es Ihrem PHP Beispiel:

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

Häufiger Fehler

Nahezu alle Antworten auf dieser Seite verwenden einen kumulativen Ersatz und weisen daher den gleichen Fehler auf, wenn Ersatzzeichenketten selbst ersetzt werden müssen. Hier einige Beispiele, bei denen dieses Muster fehlschlägt (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'] ) );

Lösung

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

Hinweis: 

Dies ist eine kompatible Variante von @ elchininet solution , die map() und Array.indexOf() verwendet und daher in IE8 und älteren Versionen nicht funktioniert. 

Die Implementierung von @ elchininet gilt für str_replace() von PHP, da sie auch Strings als find/replace-Parameter zulässt und die erste Übereinstimmung des gefundenen Arrays verwendet, wenn Duplikate vorhanden sind (meine Version verwendet die letzten). Ich habe in dieser Implementierung keine Zeichenfolgen akzeptiert, da dieser Fall bereits von JS's String.replace() verarbeitet wird.

26
text = text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
16
hsz

Ein visuellerer Ansatz:

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

und so nennt man es:

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

Sie können die replace-Methode des String-Objekts mit einer Funktion im zweiten Parameter verwenden:

Erste Methode (mit einem Such- und Ersetzungsobjekt)

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

Zweite Methode (mit zwei Arrays suchen und ersetzen)

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

Gewünschte Funktion:

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

Diese function lässt eine String oder eine Array als Parameter zu:

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

Vielleicht möchten Sie in eine JS-Bibliothek namens phpJS hineinschauen.

Damit können Sie die str_replace-Funktion ähnlich wie in PHP verwenden. Es gibt auch viele weitere PHP-Funktionen, die auf JavaScript "portiert" werden.

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

Für die Tags sollten Sie in der Lage sein, den Inhalt einfach mit .text() anstelle von .html() festzulegen.

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

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

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

... oder wenn Sie nur die <br>-Elemente entfernen möchten, können Sie die .replace() entfernen und sie vorübergehend zu DOM-Elementen machen.

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

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

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

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

Dies ist bei einem Methodenaufruf nicht möglich. Sie müssen die Aufrufe entweder miteinander verketten oder eine Funktion schreiben, die manuell das tut, was Sie benötigen.

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

Die oberste Antwort ist gleichbedeutend mit:

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

In Anbetracht dessen:

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

In diesem Fall findet keine zwingende Programmierung statt.

1
Jose Canizares

Mit ES6: Es gibt viele Möglichkeiten, search für Zeichenfolgen und replace in JavaScript zu verwenden. Einer davon ist wie folgt

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

0
Niraj Kaushal

Ich hatte einen Fall, in dem ich Zeichen aus einer Zeichenfolge entfernen musste und dies folgendermaßen tat:

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

Wäre besonders sauber gewesen, wenn Zeichenfolgen inhärent Zeichenarrays in Javascript wären, so dass wir diese Aufteilung/Verknüpfung nicht benötigt hätten, wie newName = fileName.filter((chr) => badChars.indexOf(chr) === -1), aber ich denke immer noch, dass dies ordentlich und lesbar ist, wenn Sie nur mit Zeichen und nicht mit Susbstrings umgehen müssen.

0
Alex

Eine Methode wäre:

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