> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 여러 문자열을 효율적으로 바꾸는 방법은 무엇입니까?

JavaScript에서 여러 문자열을 효율적으로 바꾸는 방법은 무엇입니까?

Linda Hamilton
풀어 주다: 2024-11-29 17:14:10
원래의
835명이 탐색했습니다.

How to Efficiently Replace Multiple Strings in JavaScript?

JavaScript에서 문자열 대량 교체

문자열의 여러 단어를 다른 단어로 바꾸는 작업은 프로그래밍에서 자주 발생합니다. 다음 시나리오를 고려해보세요.

const str = "I have a cat, a dog, and a goat.";
로그인 후 복사

"cat"를 "dog"로, "dog"를 "goat"로 바꾸어 이 문자열을 "I have a dog, a sheep, and a cat"으로 변환하려고 합니다. ", "염소"는 "고양이"로 대체됩니다.

문제: 연속 교체로 인해 잘못된 결과가 발생함 출력

순진한 접근 방식에는 replacement() 메서드를 여러 번 사용하는 것이 포함됩니다.

str = str.replace(/cat/gi, "dog");
str = str.replace(/dog/gi, "goat");
str = str.replace(/goat/gi, "cat");
로그인 후 복사

안타깝게도 이 코드는 잘못된 결과를 생성합니다. "I have a cat, a cat , 그리고 고양이." 이는 두 번째 및 세 번째 교체가 이전 교체의 변경 사항을 덮어쓰기 때문입니다.

해결책: 맵 및 사용자 정의 교체 기능 사용

이 문제를 해결하려면, 모든 대상 단어를 동시에 대체하는 보다 포괄적인 접근 방식이 필요합니다. 이는 대체 항목이 포함된 지도 객체를 정의하고 사용자 정의 대체 함수를 사용하여 달성할 수 있습니다.

const mapObj = {
  cat: "dog",
  dog: "goat",
  goat: "cat",
};

const str = str.replace(/cat|dog|goat/gi, (matched) => {
  return mapObj[matched];
});
로그인 후 복사

정규식 패턴을 동적으로 생성

해결책을 만들려면 보다 일반화 가능하므로 맵의 키를 기반으로 정규식 패턴을 동적으로 생성할 수 있습니다. object:

const re = new RegExp(Object.keys(mapObj).join("|"), "gi");

const str = str.replace(re, (matched) => {
  return mapObj[matched];
});
로그인 후 복사

대량 문자열 교체를 위한 재사용 가능한 함수

마지막으로 이 접근 방식을 재사용 가능한 함수로 캡슐화할 수 있습니다.

const replaceAll = (str, mapObj) => {
  const re = new RegExp(Object.keys(mapObj).join("|"), "gi");

  return str.replace(re, (matched) => {
    return mapObj[matched.toLowerCase()];
  });
};
로그인 후 복사

이 함수는 문자열과 교체 맵을 가져와 변환된 결과를 반환합니다. string.

요약하자면, JavaScript에서는 여러 문자열을 다른 여러 문자열로 바꾸는 여러 가지 방법이 있습니다. 여기에 제시된 솔루션은 맵 객체와 사용자 정의 대체 기능을 사용하여 모든 대체가 동시에 수행되어 원하는 결과가 정확하게 나오도록 합니다.

위 내용은 JavaScript에서 여러 문자열을 효율적으로 바꾸는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿