JavaScript에서 텍스트를 바꾸고 JavaScript에서 str_replace를 수행하려면 어떻게해야합니까?


137

str_replaceJavaScript의 일부 텍스트를 대체 하기 위해 또는 이와 유사한 대안 을 사용하고 싶습니다 .

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
이상하게 str_replace도 PHP 는 동일한 길이의 두 배열을 받아들입니다. 첫 번째 배열의 각 문자열은 같은 인덱스에서 두 번째 배열의 문자열로 바뀝니다. Javascript 에서이 정확한 동작을 모방 한 지금까지 찾은 올바른 기능에 대해서는 stackoverflow.com/a/5069776/296430 을 참조하십시오 .
Jules Colle

2
@JulesColle은 대답이 자주 실패합니다-실패한 이유 / 언제, 더 나은 해결책은 여기를 참조하십시오 : stackoverflow.com/a/37949642/445295
Stephen M. Harris

1
PHP 버전과 쿼크를 포함한 높은 호환성을 원한다면 github.com/kvz/locutus/blob/master/src/php/strings/…를
Doug Coburn

답변:


12

문자열 교체에 정규식을 사용하면 문자열 교체를 사용하는 것보다 속도가 훨씬 느립니다. JSPerf 에서
설명 했듯이 정규 표현식을 만드는 데 다른 수준의 효율성을 가질 수 있지만 모든 것이 간단한 문자열 바꾸기보다 훨씬 느립니다. 다음과 같은 이유로 정규 표현식이 느려집니다 .

고정 문자열 일치에는 역 추적, 컴파일 단계, 범위, 문자 클래스 또는 정규식 엔진 속도를 늦추는 여러 가지 다른 기능이 없습니다. 정규식 일치를 최적화하는 방법은 확실히 있지만 일반적인 경우에는 색인을 문자열로 이길 가능성이 낮습니다.

JS perf 페이지에서 간단한 테스트 실행을 위해 몇 가지 결과를 문서화했습니다.

<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

201

당신은 replace방법 을 사용할 것입니다 :

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

첫 번째 주장은 당신이 찾고있는 것입니다. 정규식도 사용할 수 있습니다.

원래 문자열은 변경 하지 않습니다 . 새 값만 반환합니다.


4
'반품 만하고 변경되지 않습니다'에 대해 대단히 감사합니다! 그것은 내가 당신의 의견을 발견 할 때까지 오랫동안 내 머리를 찢고 있던 것이었다 ...
Aditya MP

70
string.replace ( 'old', 'new')는 문자열에서 'old'의 첫 번째 인스턴스 만 대체합니다. realmag777의 답변과 같이 'g'플래그와 함께 정규 표현식을 사용하면 문자열의 모든 인스턴스가 대체됩니다. text = text.replace (/ old / g, 'new')는 'old'의 모든 인스턴스를 대체합니다
WNRosenberg

1
대소 문자를 구분하지 않는 것은 어떻습니까?
Netorica 2016 년

7
^ text.replace (/ old / gi, 'new')는 대소 문자를 구분하지 않는 'new'에 대해 'old'의 모든 인스턴스를 대체합니다 (예 : 'OLD'및 'oLd'도 대체 됨)
arnoudhgz


84

더 간단하게 :

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

모든 공백을 '_'로 바꿉니다!


10
이것은 "str_replace"가 수행하는 것 (글로벌)의보다 정확한 번역입니다. 선택한 답변은 첫 번째 인스턴스 만 대체합니다.
rICh

1
특히 16 진수 이스케이프를 대체하는 경우 문자를 이스케이프하는 것을 잊지 마십시오. 예를 들어 \ x27은 다음과 같습니다..replace(/\\x3B/g,';')
dmayo

18

이 모든 방법은 원래 값을 수정하지 않고 새 문자열을 반환합니다.

var city_name = 'Some text with spaces';

첫 번째 공백 을 _로 바꿉니다.

city_name.replace(' ', '_'); // Returns: Some_text with spaces

정규식을 사용하여 모든 공백 을 _로 바꿉니다 . 정규식을 사용해야하는 경우 https://regex101.com/에서 테스트하는 것이 좋습니다.

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

정규식없이 모든 공백 을 _로 바꿉니다 . 기능적인 방법.

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

16

다음과 같이 작성해야합니다.

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

14

다른 사람들이 당신에게주는 코드는 한 번만 대체하지만 정규 표현식을 사용하면 모두를 대체합니다 (@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"변수는 "이것은 바꾸고 싶지 않은 샘플 텍스트입니다"가됩니다.

정규식에 대한 빠른 안내서를 보려면 여기를 방문하십시오.
http://www.cheatography.com/davechild/cheat-sheets/regular-expressions/
에 대한 자세한 내용은 https://developer.mozilla.org/를 참조str.replace() 하십시오.
en-US / docs / JavaScript / Reference / Global_Objects / String / replace
행운을 빕니다!


14

해당 함수는 한 번의 발생 대체합니다 . 여러 발생을 대체해야하는 경우이 기능을 시도해야합니다. http://phpjs.org/functions/str_replace:527

반드시 그런 것은 아닙니다. Hans Kesting의 답변을 참조하십시오.

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

8

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

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

7

JavaScript에서는 replaceString 객체 에서 메소드 를 호출합니다 ( 예 : "this is some sample text that i want to replace".replace("want", "dont want")대체 된 문자열을 반환 함).

var text = "this is some sample text that i want to replace";
var new_text = text.replace("want", "dont want"); // new_text now stores the replaced string, leaving the original untouched

7

JavaScript에는 replace()하위 문자열을 대체하기위한 String 객체의 메소드가 있습니다. 이 방법에는 두 가지 인수가있을 수 있습니다. 첫 번째 인수는 문자열 또는 정규식 패턴 (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

4

당신이 사용할 수있는

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

한 번에 하나의 문자열에서 여러 값을 변경하려면 (예 : #을 문자열 v로, _를 문자열 w로 변경) :

text.replace(/#|_/g,function(match) {return (match=="#")? v: w;});

3

PHP와 동등한 것을 원한다면 Locutusstr_replace 사용할 수 있습니다 . PHP의 지원 버전은 JavaScript가 지원 하는 것보다 더 많은 옵션을 지원합니다. 예를 들어 태그 :str_replaceString.prototype.replace

//PHP
$bodytag = str_replace("%body%", "black", "<body text='%body%'>");
//JS with Locutus
var $bodytag = str_replace(['{body}', 'black', '<body text='{body}'>')  

또는 배열

//PHP
$vowels = array("a", "e", "i", "o", "u", "A", "E", "I", "O", "U");
$onlyconsonants = str_replace($vowels, "", "Hello World of PHP");
//JS with Locutus
var $vowels = ["a", "e", "i", "o", "u", "A", "E", "I", "O", "U"];
var $onlyconsonants = str_replace($vowels, "", "Hello World of PHP");

또한 이것은 정규 표현식을 사용하지 않고 루프에 사용합니다. 정규식을 사용하지 않고 간단한 문자열 바꾸기를 원하면 Locutus 기반으로 다음과 같은 것을 사용할 수 있습니다

function str_replace (search, replace, subject) {

  var i = 0
  var j = 0
  var temp = ''
  var repl = ''
  var sl = 0
  var fl = 0
  var f = [].concat(search)
  var r = [].concat(replace)
  var s = subject
  s = [].concat(s)

  for (i = 0, sl = s.length; i < sl; i++) {
    if (s[i] === '') {
      continue
    }
    for (j = 0, fl = f.length; j < fl; j++) {
      temp = s[i] + ''
      repl = r[0]
      s[i] = (temp).split(f[j]).join(repl)
      if (typeof countObj !== 'undefined') {
        countObj.value += ((temp.split(f[j])).length - 1)
      }
    }
  }
  return s[0]
}
var text = "this is some sample text that i want to replace";

var new_text = str_replace ("want", "dont want", text)
document.write(new_text)

자세한 내용은 소스 코드 https://github.com/kvz/locutus/blob/master/src/php/strings/str_replace.js를 참조하십시오.


2

이 사용하여 복수 응답 이미 str.replace () (이 질문에 대한 공정한 충분하다) 및 regex하지만 당신은의 조합을 사용할 수 있습니다 str.split을 ()()에 가입 보다 더 빨리 함께 인 str.replace()regex .

아래는 실제 예입니다.

var text = "this is some sample text that i want to replace";

console.log(text.split("want").join("dont want"));


2

다음과 같은 옵션이 있습니다.

  1. 첫 번째 발생을 교체

var text = "this is some sample text that i want to replace and this i WANT to replace as well.";
var new_text = text.replace('want', 'dont want');
// new_text is "this is some sample text that i dont want to replace and this i WANT to replace as well"
console.log(new_text)

  1. 대소 문자를 구분하여 모든 항목 바꾸기

var text = "this is some sample text that i want to replace and this i WANT to replace as well.";
var new_text = text.replace(/want/g, 'dont want');
// new_text is "this is some sample text that i dont want to replace and this i WANT to replace as well
console.log(new_text)

  1. 모든 경우 교체-대소 문자 구분

var text = "this is some sample text that i want to replace and this i WANT to replace as well.";
var new_text = text.replace(/want/gi, 'dont want');
// new_text is "this is some sample text that i dont want to replace and this i dont want to replace as well
console.log(new_text)

더 많은 정보-> 여기


2

자바 스크립트에서, 대체 할 새에 주어진 문자열에서 하위 문자열을 대체 할 수 기능을. 사용하다:

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

이 함수로 정규 표현식을 사용할 수도 있습니다. 예를 들어, 원하는 경우 모든 항목 교체 ,와를 ..

var text = "123,123,123";
var new_text = text.replace(/,/g, ".");
console.log(new_text);

여기서 g수정자는 전체적으로 사용 가능한 모든 일치를 일치시키는 데 사용됩니다.


2

replace substring in a sentence반응 을 사용하는 방법 :

 const replace_in_javascript = (oldSubStr, newSubStr, sentence) => {
    let newStr = "";
    let i = 0;
    sentence.split(" ").forEach(obj => {
      if (obj.toUpperCase() === oldSubStr.toUpperCase()) {
        newStr = i === 0 ? newSubStr : newStr + " " + newSubStr;
        i = i + 1;
      } else {
        newStr = i === 0 ? obj : newStr + " " + obj;
        i = i + 1;
      }
    });
    return newStr;
  };

RunMethod 여기


2

정규식을 사용하지 않으려면이 함수를 사용하여 문자열의 모든 것을 대체 할 수 있습니다

소스 코드:

function ReplaceAll(mystring, search_word, replace_with) 
{
    while (mystring.includes(search_word))
    {
        mystring = mystring.replace(search_word, replace_with);
    }

    return mystring;  
}

사용하는 방법:

var mystring = ReplaceAll("Test Test", "Test", "Hello"); 

2

JS String.prototype.replace첫 번째 인수는 정규식 패턴 또는 문자열이어야하고 두 번째 인수는 문자열 또는 함수 여야합니다.

str.replace(regexp|substr, newSubStr|function);

전의:

var str = 'this is some sample text that i want to replace'; var newstr = str.replace(/want/i, "dont't want"); document.write(newstr); // this is some sample text that i don't want to replace


0
function str_replace($old, $new, $text)
{
   return ($text+"").split($old).join($new); 
}

추가 라이브러리가 필요하지 않습니다.


-1

replace_in_javascript요구 사항을 충족시키는 방법 을 추가했습니다 . 또한 변수를 참조 해야하는 문자열 "new_text"을 작성하고 있음을 발견했습니다 .document.write()new_text

let replace_in_javascript= (replaceble, replaceTo, text) => {
  return text.replace(replaceble, replaceTo)
}

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.