JavaScript에서 특정 색인의 문자를 바꾸려면 어떻게해야합니까?

문자열을 가지고 있다고 가정 해 봅시다 Hello world. 색인 3에서 문자를 바꿔야합니다. 색인을 지정하여 문자를 바꾸려면 어떻게해야합니까?

var str = "hello world";

나는 같은 것이 필요하다

str.replaceAt(0,"h");

JavaScript에서 문자열은 변경할 수 없으므로 변경된 내용으로 새 문자열을 만들고 변수를 지정하도록 지정하는 것이 최선의 방법입니다.

replaceAt()함수를 직접 정의해야합니다 .

String.prototype.replaceAt = function(index, replacement) {
    return this.substr(0, index) + replacement + this.substr(index + replacement.length);
}

그리고 이것을 다음과 같이 사용하십시오 :

var hello = "Hello World";
alert(hello.replaceAt(2, "!!")); // Should display He!!o World

replaceAtJavaScript 에는 기능 이 없습니다 . 다음 코드를 사용하여 지정된 위치에있는 문자열의 모든 문자를 바꿀 수 있습니다.

function rep() {
    var str = 'Hello World';
    str = setCharAt(str,4,'a');
    alert(str);
}

function setCharAt(str,index,chr) {
    if(index > str.length-1) return str;
    return str.substr(0,index) + chr + str.substr(index+1);
}

<button onclick="rep();">click</button>

당신은 할 수 없습니다. 위치 전후의 문자를 사용하여 새 문자열로 연결하십시오.

var s = "Hello world";
var index = 3;
s = s.substring(0, index) + 'x' + s.substring(index + 1);

여기에 많은 답변이 있으며 모두 두 가지 방법을 기반으로합니다.

• 방법 1 : 두 개의 하위 문자열을 사용하여 문자열을 분할하고 그 사이에 문자를 넣습니다.
• METHOD2 : 문자열을 문자형 배열로 변환하고 하나의 배열 구성원을 대체하여 결합

개인적으로, 나는이 두 가지 방법을 다른 경우에 사용할 것입니다. 설명하겠습니다.

@ FabioPhms : 귀하의 방법은 처음에 사용한 방법이며 많은 문자가있는 문자열이 나쁘다는 것을 두려워했습니다. 그러나 질문은 많은 캐릭터가 무엇입니까? 10 개의 "lorem ipsum"단락에서 테스트했으며 몇 밀리 초가 걸렸습니다. 그런 다음 10 배 큰 문자열로 테스트했습니다. 큰 차이는 없었습니다. 흠.

@vsync, @Cory Mawhorter : 귀하의 의견은 모호하지 않습니다. 그러나 다시 큰 문자열은 무엇입니까? 32 ... 100kb의 성능이 향상되고 문자 교체 작업 하나에 하위 문자열 변형을 사용해야한다는 데 동의합니다.

그러나 약간의 교체 작업을 수행하면 어떻게됩니까?

그 경우 더 빠른 것을 증명하기 위해 자체 테스트를 수행해야했습니다. 1000 자로 구성된 비교적 짧은 문자열을 조작하는 알고리즘이 있다고 가정 해 봅시다. 평균적으로 해당 문자열의 각 문자는 ~ 100 배로 바뀔 것으로 예상됩니다. 따라서 다음과 같이 테스트하는 코드는 다음과 같습니다.

var str = "... {A LARGE STRING HERE} ...";

for(var i=0; i<100000; i++)
{
  var n = '' + Math.floor(Math.random() * 10);
  var p = Math.floor(Math.random() * 1000);
  // replace character *n* on position *p*
}

나는 이것을 위해 바이올린을 만들었고 여기 있습니다 . TEST1 (하위 문자열)과 TEST2 (배열 변환)의 두 가지 테스트가 있습니다.

결과 :

• 테스트 1 : 195ms
• 테스트 2 : 6ms

배열 변환이 하위 문자열보다 2 배 더 큰 것 같습니다! 그래서-도대체 여기서 무슨 일이 있었나요 ???

실제로 일어나는 일은 TEST2의 모든 연산이와 같은 할당 표현식을 사용하여 배열 자체에서 수행된다는 것 strarr2[p] = n입니다. 할당은 큰 문자열의 하위 문자열과 비교할 때 실제로 빠르며 승리 할 것입니다.

따라서 작업에 적합한 도구를 선택하는 것이 중요합니다. 다시.

벡터를 사용한 작업은 일반적으로 문자열에 가장 효과적입니다.

다음 기능을 제안합니다.

String.prototype.replaceAt=function(index, char) {
    var a = this.split("");
    a[index] = char;
    return a.join("");
}

이 스 니펫을 실행하십시오.

String.prototype.replaceAt=function(index, char) {
    var a = this.split("");
    a[index] = char;
    return a.join("");
}

var str = "hello world";
str = str.replaceAt(3, "#");

document.write(str);

자바 스크립트에서 문자열은 변경할 수 없으므로 다음과 같은 작업을 수행해야합니다

var x = "Hello world"
x = x.substring(0, i) + 'h' + x.substring(i+1);

i에서 x의 문자를 'h'로 바꾸려면

str = str.split('');
str[3] = 'h';
str = str.join('');

콜백과 함께 String.replace를 사용하는 1 줄 라이너

// 0 - index to replace, 'f' - replacement string
'dog'.replace(/./g, (c, i) => i == 0? 'f': c)
// "fog"

설명 :

//String.replace will call the callback on each pattern match
//in this case - each character
'dog'.replace(/./g, function (character, index) {
   if (index == 0) //we want to replace the first character
     return 'f'
   return character //leaving other characters the same
})

function dothis() {
  var x = document.getElementById("x").value;
  var index = document.getElementById("index").value;
  var text = document.getElementById("text").value;
  var arr = x.split("");
  arr.splice(index, 1, text);
  var result = arr.join("");
  document.getElementById('output').innerHTML = result;
  console.log(result);
}
dothis();

<input id="x" type="text" value="White Dog" placeholder="Enter Text" />
<input id="index" type="number" min="0"value="6" style="width:50px" placeholder="index" />
<input id="text" type="text" value="F" placeholder="New character" />
<br>
<button id="submit" onclick="dothis()">Run</button>
<p id="output"></p>

이 방법은 작은 길이의 문자열에는 좋지만 큰 텍스트에는 느릴 수 있습니다.

var x = "White Dog";
var arr = x.split(""); // ["W", "h", "i", "t", "e", " ", "D", "o", "g"]
arr.splice(6, 1, 'F');
var result = arr.join(""); // "White Fog"

/* 
  Here 6 is starting index and 1 is no. of array elements to remove and 
  final argument 'F' is the new character to be inserted. 
*/

@CemKalyoncu : 큰 답변 감사합니다!

또한 Array.splice 메서드와 비슷하게 만들기 위해 약간 조정했습니다 (@Ates의 메모를 고려했습니다).

spliceString=function(string, index, numToDelete, char) {
      return string.substr(0, index) + char + string.substr(index+numToDelete);
   }

var myString="hello world!";
spliceString(myString,myString.lastIndexOf('l'),2,'mhole'); // "hello wormhole!"

이것은 다음과 유사하게 작동합니다 Array.splice.

String.prototype.splice = function (i, j, str) {
    return this.substr(0, i) + str + this.substr(j, this.length);
};

당신은 시도 할 수 있습니다

var strArr = str.split("");

strArr[0] = 'h';

str = strArr.join("");

문자열의 문자를 바꾸려면 변경 가능한 문자열을 만들어야합니다. 이것들은 본질적으로 문자 배열입니다. 팩토리를 만들 수 있습니다 :

  function MutableString(str) {
    var result = str.split("");
    result.toString = function() {
      return this.join("");
    }
    return result;
  }

그런 다음 문자에 액세스 할 수 있으며 문자열로 사용될 때 전체 배열이 문자열로 변환됩니다.

  var x = MutableString("Hello");
  x[0] = "B"; // yes, we can alter the character
  x.push("!"); // good performance: no new string is created
  var y = "Hi, "+x; // converted to string: "Hi, Bello!"

Afanasii Kurakin의 답변을 요약하면 다음과 같습니다.

function replaceAt(str, index, ch) {
    return str.replace(/./g, (c, i) => i == index ? ch : c)
}

let str = 'Hello World'
str = replaceAt(str, 1, 'u')
console.log(str) // Hullo World

정규 표현식과 replacer 함수를 모두 확장하고 설명해 보겠습니다.

function replaceAt(str, index, newChar) {
    function replacer(origChar, strIndex) {
        if (strIndex === index)
            return newChar
        else
            return origChar
    }
    return str.replace(/./g, replacer)
}

let str = 'Hello World'
str = replaceAt(str, 1, 'u')
console.log(str) // Hullo World

정규식 .은 정확히 하나의 문자와 일치합니다. 는 g이 for 루프의 모든 문자와 일치합니다. replacer기능은 오리지널 캐릭터와 그 캐릭터가 문자열에있는 경우의 인덱스를 모두 제공이라고합니다. 우리는 간단한 메이크업 if문은 우리가 반환하는거야 있는지 확인하거나 origChar또는newChar .

inset 메소드를 포함하도록 문자열 유형을 확장 할 수 있습니다.

String.prototype.append = function (index,value) {
  return this.slice(0,index) + value + this.slice(index);
};

var s = "New string";
alert(s.append(4,"complete "));

그런 다음 함수를 호출 할 수 있습니다.

나는 당신이 묻는 것과 비슷한 기능을 수행했습니다. 문자열의 문자가 허용되지 않는 문자의 배열에 있는지 확인합니다.

    var validate = function(value){
        var notAllowed = [";","_",">","<","'","%","$","&","/","|",":","=","*"];
        for(var i=0; i<value.length; i++){
            if(notAllowed.indexOf(value.charAt(i)) > -1){
               value = value.replace(value.charAt(i), "");
               value = validate(value);
            }
       }
      return value;
   }

이것은 RegExp로 쉽게 달성 할 수 있습니다!

const str = 'Hello RegEx!';
const index = 11;
const replaceWith = 'p';

//'Hello RegEx!'.replace(/^(.{11})(.)/, `$1p`);
str.replace(new RegExp(`^(.{${ index }})(.)`), `$1${ replaceWith }`);

//< "Hello RegExp"

다음은 반응 / 자바 스크립트의 색인에서 단어 또는 개별 문자의 스타일을 지정하려는 경우에 나온 버전입니다.

replaceAt( yourArrayOfIndexes, yourString/orArrayOfStrings ) 

실제 예 : https://codesandbox.io/s/ov7zxp9mjq

function replaceAt(indexArray, [...string]) {
    const replaceValue = i => string[i] = <b>{string[i]}</b>;
    indexArray.forEach(replaceValue);
    return string;
}

그리고 다른 대안이 있습니다.

function replaceAt(indexArray, [...string]) {
    const startTag = '<b>';
    const endTag = '</b>';
    const tagLetter = i => string.splice(i, 1, startTag + string[i] + endTag);
    indexArray.forEach(tagLetter);
    return string.join('');
}

그리고 또 다른...

function replaceAt(indexArray, [...string]) {
    for (let i = 0; i < indexArray.length; i++) {
        string = Object.assign(string, {
          [indexArray[i]]: <b>{string[indexArray[i]]}</b>
        });
    }
    return string;
}

나는 이것이 오래되었다는 것을 알고 있지만 솔루션은 음의 인덱스에서 작동하지 않으므로 패치를 추가합니다. 그것이 누군가를 돕기를 바랍니다

String.prototype.replaceAt=function(index, character) {
    if(index>-1) return this.substr(0, index) + character + this.substr(index+character.length);
    else return this.substr(0, this.length+index) + character + this.substr(index+character.length);

}

Kth인덱스 (0 기반 인덱스) 를로 바꾸려고한다고 가정하겠습니다 'Z'. 당신 Regex은 이것을 할 수 있습니다 .

var re = var re = new RegExp("((.){" + K + "})((.){1})")
str.replace(re, "$1A$`");

다음 함수를 사용하여 문자열의 특정 위치 를 바꾸 Character거나 String특정 위치에서 사용할 수 있습니다 . 다음의 모든 대소 문자를 교체하려면 String.prototype.replaceAllMatches()function을 사용하십시오 .

String.prototype.replaceMatch = function(matchkey, replaceStr, matchIndex) {
    var retStr = this, repeatedIndex = 0;
    for (var x = 0; (matchkey != null) && (retStr.indexOf(matchkey) > -1); x++) {
        if (repeatedIndex == 0 && x == 0) {
            repeatedIndex = retStr.indexOf(matchkey);
        } else { // matchIndex > 0
            repeatedIndex = retStr.indexOf(matchkey, repeatedIndex + 1);
        }
        if (x == matchIndex) {
            retStr = retStr.substring(0, repeatedIndex) + replaceStr + retStr.substring(repeatedIndex + (matchkey.length));
            matchkey = null; // To break the loop.
        }
    }
    return retStr;
};

테스트:

var str = "yash yas $dfdas.**";

console.log('Index Matched replace : ', str.replaceMatch('as', '*', 2) );
console.log('Index Matched replace : ', str.replaceMatch('y', '~', 1) );

산출:

Index Matched replace :  yash yas $dfd*.**
Index Matched replace :  yash ~as $dfdas.**

다음은 삼항 및 맵 연산자를 사용하는 솔루션입니다. 당신이 나에게 물어 보면, 더 읽기 쉽고, 유지하기 쉬운 끝을 이해하기가 더 쉽습니다.

es6 및 모범 사례에 더 가깝습니다.

function replaceAt() {
  const replaceAt = document.getElementById('replaceAt').value;

  const str = 'ThisIsATestStringToReplaceCharAtSomePosition';
  const newStr = Array.from(str).map((character, charIndex) => charIndex === (replaceAt - 1) ? '' : character).join('');

  console.log(`New string: ${newStr}`);
}

<input type="number" id="replaceAt" min="1" max="44" oninput="replaceAt()"/>

여기의 방법은 복잡합니다. 나는 이렇게 할 것입니다 :

var myString = "this is my string";
myString = myString.replace(myString.charAt(number goes here), "insert replacement here");

이것은 얻는 것처럼 간단합니다.