Заменить сразу несколько строк

Легко ли это эквивалентно этому в 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);
...

Ответы

Ответ 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);

Ответ 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'] ) );

Ответ 3

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

Ответ 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)]});
}

Ответ 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;

Ответ 6

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

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

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

Ответ 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

Ответ 8

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

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

Ответ 9

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

Ответ 10

Верхний ответ эквивалентен выполнению:

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/>"];

В этом случае никакого императивного программирования не происходит.

Ответ 11

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

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

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

const originalString = '<strong>Hello World</strong> \n Let\ 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);

Ответ 12

Один из методов:

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

Ответ 13

Вот простой подход на основе карты. Замена строк на 95% быстрее, чем замена регулярных выражений.

function strReplaceMap(str, map) {
  for (var search in map) {
    str = str.replace(search, map[search]);
  }
  return str;
}

И здесь сравнительный тест, сравнивающий это с регулярным выражением.

Ответ 14

У меня был случай, когда мне нужно было удалить символы из строки и сделать это следующим образом:

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

Было бы лишним, если бы строки были по сути массивами символов в javascript, так что нам не понадобились бы те split/join, как newName = fileName.filter((chr) => badChars.indexOf(chr) === -1), но я все же считаю, что это аккуратно и легко читаемо, если вам нужно иметь дело только с символами и не сухожилие.

Ответ 15

const replaceStrings = (str, find=[], replace='') => {
  const regex = new RegExp('(${find.join('|')})');
  return str.replace(regex, replace);
}