一次替換多個字符串

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 解決方案的更兼容變體，它使用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對象的 replace 方法與第二個參數中的函數一起使用：

第一種方法（使用查找和替換對象）

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

最佳答案相當於做：

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

在這種情況下，沒有進行任何命令式編程。

Answer 7

使用 ES6：在JavaScript中有很多search字符串和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);

Answer 8

一個簡單的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

Answer 9

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 10

您可能想查看一個名為 phpJS 的 JS 庫。

它允許您使用 str_replace 函數，就像在 PHP 中使用它一樣。 還有更多的 php 函數“移植”到 JavaScript。

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

Answer 11

 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)

Answer 12

沒有辦法在一個方法調用中執行此操作，您必須將調用鏈接在一起，或者編寫一個手動執行所需操作的函數。

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

Answer 13

對於標簽，您應該能夠使用.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 14

我有一個案例，我不得不從字符串中刪除字符，並像這樣做：

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

如果字符串本身就是javascript中的字符數組，那么我們就不需要那些拆分/連接了，比如newName = fileName.filter((chr) => badChars.indexOf(chr) === -1)但我仍然認為，如果你只需要處理字符而不是字符串，那么它是整潔可讀的。

Answer 15

以對象為參數的版本：

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

Answer 16

jquery 有一個解決方案。

var htmlString = $( 元素).html(); $( 元素 ).text( htmlString );

在這里查看： https ://api.jquery.com/html/

Answer 17

將所有這些包裝在一個函數中，您可以同時傳遞一個數組和一個字符串

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

Answer 18

一種方法是：

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