Programming

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

procodes 2020. 2. 13. 00:54
반응형

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.substr(0, index) + 'x' + s.substr(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를 사용하는 하나의 라이너 (이모티콘 지원 없음) :

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

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

  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!"

당신은 시도 할 수 있습니다

var strArr = str.split("");

strArr[0] = 'h';

str = strArr.join("");

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

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중 하나를 반환할지 여부를 결정하기 위해 간단한 진술을합니다 .origCharnewChar


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

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.**

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

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

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

참고 URL : https://stackoverflow.com/questions/1431094/how-do-i-replace-a-character-at-a-particular-index-in-javascript



반응형