Замените несколько строк одновременно

Question

Есть ли такой простой эквивалент в 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);
...

Answer 1

Вы можете расширить объект 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);

Answer 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's , в котором используется map() и Array.indexOf() и, следовательно, не будут работать в IE8 и старше.

Реализация @ elchininet вернее PHP str_replace(), поскольку она также позволяет использовать строки в качестве параметров поиска / замены и будет использовать первое совпадение с массивом поиска, если есть дубликаты (моя версия будет использовать последний).Я не принял строки в этой реализации, потому что этот случай уже обработан встроенным в JS String.replace().

Answer 3

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

Answer 4

Вы можете использовать метод замены объекта String с функцией во втором параметре:

Первый метод (с использованием объекта поиска и замены)

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

Второй метод (с использованием двух массивов, поиск и замена)

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

РЕДАКТИРОВАТЬ

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

Answer 5

Более визуальный подход:

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;

Answer 6

Возможно, вы захотите заглянуть в библиотеку JS phpJS.

Она позволяет вам использовать функцию str_replace аналогично тому, как вы использовали бы ее в PHP.Есть также много других php-функций, «портированных» на JavaScript.

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

Answer 7

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

Answer 8

Для тегов вы можете просто установить содержимое с .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);

Answer 9

Невозможно сделать это за один вызов метода, вам придется либо объединить вызовы вместе, либо написать функцию, которая делает вручную то, что вам нужно.

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

Answer 10

Использование ES6: Есть много способов search для строк и replace в JavaScript. Один из них следующий:

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