Замените несколько строк одновременно - PullRequest
59 голосов
/ 21 февраля 2011

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

Ответы [ 13 ]

79 голосов
/ 21 февраля 2011

Вы можете расширить объект 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);
31 голосов
/ 21 июня 2016

Распространенная ошибка

Почти во всех ответах на этой странице используется кумулятивная замена и, таким образом, имеется тот же недостаток, когда заменяемые строки сами подлежат замене.Вот пара примеров, где этот шаблон не работает (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().

17 голосов
/ 21 февраля 2011
text = text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
9 голосов
/ 02 января 2016

Вы можете использовать метод замены объекта 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)]});
}
8 голосов
/ 15 апреля 2013

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

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;
4 голосов
/ 21 февраля 2011

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

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

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

3 голосов
/ 30 мая 2014
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
2 голосов
/ 21 февраля 2011

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

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

var s = "<>\n";
s = s.replace("<", "&lt;");
s = s.replace(">", "&gt;");
s = s.replace("\n", "<br/>");
1 голос
/ 08 февраля 2019

Использование 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...