如何在JavaScript中执行str_replace,替换JavaScript中的文本?

144

我想要在JavaScript中使用str_replace或其类似替代方法来替换一些文本。

var text = "this is some sample text that i want to replace";
var new_text = replace_in_javascript("want", "dont want", text);
document.write(new_text);

应该给出

this is some sample text that i dont want to replace

如果你要使用正则表达式,与内置的替换方法相比,有哪些性能影响。


3
奇怪的是没有人注意到PHP的str_replace函数也可以接受两个长度相同的数组作为参数,第一个数组中的每个字符串会被第二个数组中对应位置的字符串所替换。请参考https://dev59.com/t2445IYBdhLWcg3wDV4P#5069776,这里有我目前找到的唯一能够在javascript中模拟这种精确行为的正确的函数。 - Jules Colle
2
@JulesColle 那个答案经常失败 - 请查看为什么/何时会失败以及更好的解决方案:https://dev59.com/t2445IYBdhLWcg3wDV4P#37949642 - Stephen M. Harris
1
如果您想要与php版本高度兼容(包括怪癖),请查看https://github.com/kvz/locutus/blob/master/src/php/strings/str_replace.js。 - Doug Coburn
25个回答

209

您可以使用replace方法:

text = text.replace('old', 'new');

第一个参数就是你要查找的内容,很显然。它也可以接受正则表达式。

只需记住,它并不会改变原始字符串。它仅返回新值。


4
非常感谢您提供的“它仅返回而不更改”的信息!这正是我长时间苦思冥想直到看到您的评论才解决的问题…… - Aditya M P
73
string.replace('old','new') 只会替换字符串中第一次出现的 'old'。如果使用带有“g”标志的正则表达式,就像 realmag777 的答案一样,将替换字符串中所有的实例。text = text.replace(/old/g, 'new') 将替换字符串中所有的 'old' 实例。 - WNRosenberg
1
不区分大小写怎么样? - Netorica
7
^ text.replace(/old/gi, 'new')将替换所有出现的“old”为“new”,不区分大小写(例如,“OLD”和“oLd”也将被替换)。 - arnoudhgz
2
以及一些相关文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace - elad silver

89

更简单地说:

city_name=city_name.replace(/ /gi,'_');

用下划线替换所有空格!


10
“str_replace”(全局)的更准确翻译是替换所有匹配项。所选答案只会替换第一个匹配项。 - rICh
1
不要忘记转义字符,特别是如果你要替换十六进制转义字符:例如\x27应该写成.replace(/\\x3B/g,';') - dmayo

20

所有这些方法都不修改原始值,它们返回新字符串。

var city_name = 'Some text with spaces';

第一个空格替换为_

city_name.replace(' ', '_'); // Returns: "Some_text with spaces" (replaced only 1st match)

使用正则表达式将所有空格替换为 _。如果您需要使用正则表达式,请建议使用https://regex101.com/进行测试。

city_name.replace(/ /gi,'_');  // Returns: Some_text_with_spaces 

使用函数式方法将所有空格替换为_,不使用正则表达式

city_name.split(' ').join('_');  // Returns: Some_text_with_spaces

17

你应该写出类似这样的代码:

var text = "this is some sample text that i want to replace";
var new_text = text.replace("want", "dont want");
document.write(new_text);

16

别人给你的代码只替换了一个实例,而使用正则表达式可以替换所有实例(就像@sorgit所说的那样)。要将所有的“want”替换为“not want”,请使用以下代码:

var text = "this is some sample text that i want to replace";
var new_text = text.replace(/want/g, "dont want");
document.write(new_text);
变量"new_text"将最终为"this is some sample text that i dont want to replace"。
要快速了解正则表达式,请访问这里:http://www.cheatography.com/davechild/cheat-sheets/regular-expressions/
要了解更多关于str.replace()的内容,请访问这里:https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/replace
祝你好运!

15

该函数仅替换一个出现的位置.. 如果您需要替换多个出现位置,可以尝试使用以下函数: http://phpjs.org/functions/str_replace:527

不一定。 请看Hans Kesting的答案:

city_name = city_name.replace(/ /gi,'_');

13
使用正则表达式进行字符串替换比使用字符串替换要慢得多。如JSPerf上演示的那样,您可以拥有不同级别的效率来创建一个正则表达式,但它们都比简单的字符串替换慢得多。正则表达式较慢的原因是:

固定字符串匹配没有回溯、编译步骤、范围、字符类或一系列其他特性,这些特性会使正则表达式引擎变慢。当然,肯定有优化正则表达式匹配的方法,但我认为在普通情况下难以超越对字符串进行索引。

对于在JSPerf页面上进行的简单测试运行,我记录了一些结果:

<script>
// Setup
  var startString = "xxxxxxxxxabcxxxxxxabcxx";
  var endStringRegEx = undefined;
  var endStringString = undefined;
  var endStringRegExNewStr = undefined;
  var endStringRegExNew = undefined;
  var endStringStoredRegEx = undefined;      
  var re = new RegExp("abc", "g");
</script>

<script>
// Tests
  endStringRegEx = startString.replace(/abc/g, "def") // Regex
  endStringString = startString.replace("abc", "def", "g") // String
  endStringRegExNewStr = startString.replace(new RegExp("abc", "g"), "def"); // New Regex String
  endStringRegExNew = startString.replace(new RegExp(/abc/g), "def"); // New Regexp
  endStringStoredRegEx = startString.replace(re, "def") // saved regex
</script>

Chrome 68 的结果如下:

String replace:    9,936,093 operations/sec
Saved regex:       5,725,506 operations/sec
Regex:             5,529,504 operations/sec
New Regex String:  3,571,180 operations/sec
New Regex:         3,224,919 operations/sec

为了让这个答案更加全面(借鉴评论),值得一提的是.replace只会替换第一个匹配的字符。如果要替换所有的匹配,唯一的可能就是使用//g。如果需要替换多个实例,性能和代码优雅性可能会变差,例如name.replace(' ', '_').replace(' ', '_').replace(' ', '_');甚至更糟糕的是while (name.includes(' ')) { name = name.replace(' ', '_') }


这很有趣,而且使用纯字符串替换比正则表达式更快是有道理的。 值得一提的是(就像某些答案中所提到的),.replace 仅替换匹配字符的第一个实例。只有在使用 //g 时才能替换所有实例。如果替换多个实例 name.replace(' ', '_').replace(' ', '_').replace(' ', '_'); 或者更糟糕的是 while (name.includes(' ')) { name = name.replace(' ', '_') },性能的权衡可能会更糟糕。 - Lex

9
var new_text = text.replace("want", "dont want");

9

嗯...你有检查过replace()吗?

你的代码应该像这样:

var text = "this is some sample text that i want to replace";
var new_text = text.replace("want", "dont want");
document.write(new_text);

8

JavaScript的String对象有一个replace()方法,可以用于替换子字符串。该方法可以接受两个参数。第一个参数可以是字符串或正则表达式模式(regExp对象),第二个参数可以是字符串或函数。下面是一个使用两个字符串参数的replace()方法的示例。

var text = 'one, two, three, one, five, one';
var new_text = text.replace('one', 'ten');
console.log(new_text)  //ten, two, three, one, five, one

请注意,如果第一个参数是字符串,只有第一次出现的子字符串会被替换,就像上面的示例一样。要替换所有出现的子字符串,您需要提供一个带有全局标志 g 的正则表达式。如果您不提供全局标志,则即使将正则表达式作为第一个参数提供,也只会替换第一次出现的子字符串。因此,让我们在上面的示例中替换所有出现的one
var text = 'one, two, three, one, five, one';
var new_text = text.replace(/one/g, 'ten');
console.log(new_text)  //ten, two, three, ten, five, ten

请注意,不要使用引号将正则表达式模式包装起来,否则它将成为字符串而不是RegExp对象。如果要进行不区分大小写的替换,则需要提供附加标志i,这使得模式不区分大小写。在这种情况下,上述正则表达式将是/one/gi。请注意此处添加的i标记。
如果第二个参数是一个函数且存在匹配项,则该函数将传递三个参数。函数接收的参数包括匹配项、匹配项位置和原始文本。您需要返回应该替换掉该匹配项的内容。例如:
var text = 'one, two, three, one, five, one';
var new_text = text.replace(/one/g, function(match, pos, text){
return 'ten';
});
console.log(new_text) //ten, two, three, ten, five, ten

您可以使用函数作为第二个参数,更好地控制替换文本。

2
你是唯一一个提到在替换功能中使用函数的人。 - Emeeus

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接