一次替换多个字符串

在 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);
...
187065 次浏览
小开

一种方法是:

var text = $(this).val();
text = text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
$("#output").html(text);
小开 
text = text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
小开

在一个方法调用中不可能做到这一点，您必须将调用链接在一起，或者编写一个手动完成所需任务的函数。

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

对于标记，您应该能够只使用 .text()而不是 .html()设置内容。

示例: < a href = “ http://jsfiddle.net/phf4u/1/”rel = “ nofollow”> http://jsfiddle.net/phf4u/1/

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


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

... 或者，如果您只想删除 <br>元素，您可以删除 .replace()，并暂时使它们成为 DOM 元素。

示例: < a href = “ http://jsfiddle.net/phf4u/2/”rel = “ nofollow”> http://jsfiddle.net/phf4u/2/

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


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


$("#output").text(textarea);
小开
最佳答案

您可以使用自己的函数来扩展 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;
};

对于全局替换，可以使用 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;
};

要使用这个函数，它应该类似于您的 PHP 示例:

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

您可能需要查看名为 phpJS 的 JS 库。

它允许您使用 str _ place 函数，类似于在 PHP 中使用它的方式。还有更多的 php 函数“移植”到 JavaScript 中。

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

小开

更直观的方法:

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;
小开 
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
小开

您可以使用带有第二个参数中的函数的 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)]});
}
小开

常见误区

本页中的几乎所有答案都使用累积替换，因此在替换字符串本身需要进行替换时会出现同样的缺陷。下面是这种模式失败的几个例子(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 的 解决方案的一个更兼容的变体，它使用 map()和 Array.indexOf()，因此不能在 IE8和更老版本中工作。

@ elchininet 的实现比 PHP 的 str_replace()更真实，因为它还允许字符串作为查找/替换参数，并且如果存在重复，将使用第一个查找数组匹配(我的版本将使用最后一个)。在这个实现中我没有接受字符串，因为这种情况已经由 JS 内置的 String.replace()处理过了。

小开

最重要的答案相当于:

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

在这种情况下，没有命令式编程。

小开

使用 ES6: 字符串的 search和 JavaScript中的 replace有很多种方法，其中之一如下所示

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

小开

一个简单的 forEach循环很好地解决了这个问题:

let text = 'the red apple and the green ball';
const toStrip = ['red', 'green'];
toStrip.forEach(x => {
text = text.replace(x, '');
});


console.log(text);
// logs -> the apple and the ball
小开 

const items = {
'<': '&lt;',
'>': '&gt;',
'\n': '<br/>',
}


const re = new RegExp('[' + Object.keys(items).join('') + ']', 'g')


const input = '<foo>\n<bar>'


const output = input.replaceAll(re, key => items[key])


console.log(output)

小开

以对象作为参数的版本:

String.prototype.strtr = function (replace) {
keys = Object.keys(replace);
result = this;
for (i = 0; i < keys.length; i++) {
result = result.replace(keys[i], replace[keys[i]]);
}
return result;
}


function htmlspecialchars(str) {
return String(str).strtr({">": "&gt;", "<": "&lt;", "\n": "<br/>"});
}


// usage
text = "<span>spam</span>";
htmlspecialchars(text);
小开

Jquery 有一个解决方案。

Var htmlString = $(element) . html () ; $(element) . text (htmlString) ;

点击此处查看: Https://api.jquery.com/html/

小开

将所有这些都包装在一个函数中，就可以同时传递一个数组和一个字符串

function str_replace(search,replace,subject) {
if(!Array.isArray(search)){
subject = subject.replace(new RegExp(search, "g"), replace)
}
else{
search.forEach( (tag, i) => subject = subject.replace(new RegExp(tag, "g"), replace[i]) )
}
return subject;
}
小开

就是那个！ 

let v = "Test's <<foo>> ((baAr))";
console.log(v);


const r = ['<', '>', 'a', '\\)', '\\(', '\'' ];


for (var i = r.length - 1; i >= 0; i--) {
v = v.replace((new RegExp(r[i], "gi")), "_");
}


console.log(v);


提交答案