programing

여러 문자열을 한 번에 바꾸기

topblog 2023. 10. 20. 13:23
반응형

여러 문자열을 한 번에 바꾸기

자바스크립트에 이와 동등한 쉬운 것이 있습니까?

$find = array("<", ">", "\n");
$replace = array("&lt;", "&gt;", "<br/>");

$textarea = str_replace($find, $replace, $textarea); 

이것은 PHP의 것을 사용하고 있습니다.str_replace, 단어 배열을 사용하여 찾고 교체할 수 있습니다.자바스크립트 / jQuery를 이용해서 이런 작업을 할 수 있습니까?

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

// string replace here

$("#output").html(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);

흔한 실수

이 페이지의 거의 모든 답변은 누적 교체를 사용하므로 교체 문자열 자체가 교체 대상인 경우와 동일한 결함이 발생합니다.다음은 이 패턴이 실패하는 몇 가지 예입니다(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().

text = text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');

시각적 접근 방식:

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이전에 대체된 문자열을 대체하지 않도록 두 번째 매개 변수에 함수가 있는 object:

첫 번째 방법(개체 찾기 및 바꾸기 사용)

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

두 번째 방법(2개의 배열을 사용하여 찾고 바꿉니다)

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

단순한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

가장 중요한 답은 다음과 같습니다.

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끈용으로 그리고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);

phpJS라고 불리는 JS 라이브러리를 조사해 보는 것이 좋습니다.

str_replace 기능을 PHP에서 사용하는 방법과 유사하게 사용할 수 있습니다.또한 자바스크립트로 "포트된" 더 많은 php 함수들이 있습니다.

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

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

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)

한 번의 메서드 호출에서 이 작업을 수행할 방법은 없습니다. 호출을 서로 연결하거나 필요한 작업을 수동으로 수행하는 함수를 작성해야 합니다.

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

태그의 경우 다음과 같은 내용을 설정할 수 있어야 합니다..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);

개체를 매개 변수로 하는 버전:

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 = $(요소). html(); $(요소).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);

한 가지 방법은 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/5069464/replace-multiple-strings-at-once

반응형