web-dev-qa-db-ja.com

JavaScriptで特定のインデックスの文字を置き換える方法は？

私は文字列を持っています、Hello worldと言うとインデックス3でcharを置き換える必要があります。どうやったらインデックスを指定してcharを置き換えることができますか？

var str = "hello world";

私は何かが必要です

str.replaceAt(0,"h");
javascriptstringreplacecharacter-replacement
459
Santhosh

JavaScriptでは、文字列は immutable です。つまり、変更した内容で新しい文字列を作成し、それを指すように変数を割り当てることが最善の方法です。

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
527
Cem Kalyoncu

JavaScriptにはreplaceAt関数はありません。次のコードを使用して、指定した位置にある任意の文字列の任意の文字を置き換えることができます。

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>
80
rahul

できません。位置の前後の文字を取り、新しい文字列に連結します。

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

ここにはたくさんの答えがあり、それらはすべて2つの方法に基づいています。

  • 方法1：2つの部分文字列を使って文字列を分割し、それらの間に文字を入れる
  • 方法2：文字列を文字配列に変換し、1つの配列メンバーを置き換えて結合する

個人的には、これら2つの方法を異なる場合に使用します。説明させてください。

@FabioPhms：あなたの方法は私が最初に使ったもので、たくさんの文字を含む文字列では悪いことが怖かったです。しかし、質問は何文字ですか？私は10の「loremイプサム」パラグラフでそれをテストしました、そしてそれは数ミリ秒かかりました。それから私はそれを10倍大きい弦でテストしました - 本当に大きな違いはありませんでした。ふむ。

@ vsync、@ Cory Mawhorter：あなたのコメントは明白です。しかし、やはり、大きな文字列は何ですか？私は32 ... 100kbのパフォーマンスではより良くなるべきであり、文字置換のこの1つの操作のためにsubstring-variantを使うべきであることに同意する。

しかし、私がかなりの数の交換をしなければならない場合はどうなりますか？

その場合のほうが速いことを証明するために、私は自分のテストを実行する必要がありました。 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（配列変換）の2つのテストがあります。

結果：

  • TEST1：195ms
  • TEST2：6ミリ秒

配列変換は部分文字列を2桁上回るようです。だから - 一体ここで何が起こったのですか？？？

実際に起こることは、TEST2のすべての操作がstrarr2[p] = nのような代入式を使って配列自身で行われるということです。代入は大きな文字列の部分文字列と比較して本当に速く、そしてそれが勝つつもりであることは明らかです。

それで、それは仕事のための正しいツールを選ぶことについてのすべてです。再び。

29
OzrenTkalcecKrznaric

ベクトルを使った作業は通常、Stringに連絡するのが最も効果的です。

私は以下の機能を提案します。

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);
28
Fabio Phms

Javascriptでは文字列は不変なので、次のようにしなければなりません。

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

Iのxの文字を 'h'に置き換える

26
DevDevDev
str = str.split('');
str[3] = 'h';
str = str.join('');
25
colllin
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. 
*/
5
Vikramaditya

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
})
4
Afanasii Kurakin

これはArray.spliceと同様に機能します。

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

@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!"
2
Scrimothy

文字列内の文字を置き換えたい場合は、可変文字列を作成する必要があります。これらは基本的に文字配列です。ファクトリを作成することができます：

  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!"
1
Jan Turoň

私はあなたが尋ねたものと似たようなことをする関数をしました。

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

あなたが試すことができます

var strArr = str.split("");

strArr[0] = 'h';

str = strArr.join("");
1
Mehulkumar

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

正規表現と置換関数の両方を展開して説明しましょう。

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

正規表現.は、正確に1文字に一致します。 gは、forループ内のすべての文字に一致させます。 replacer関数は、元の文字と文字列内のその文字のインデックスを指定して呼び出されます。単純なifステートメントを作成して、origCharまたはnewCharのどちらを返すかを決定します。

0
Stephen Quan

Replaceと呼ばれるものを使用できます。そのため、たとえば、指定された文字列の特定の部分が置き換えられます。

function replaceTheString() {
  const str = "Donald Trump";
  console.log(str.replace("Tr", "L"));
}

関数を実行すると、Donald Lumpがコンソールに出力されます。もちろん、任意の文字でこれを行うことができ、それは動作します。 string.replaceをより深く理解したい場合は、チェックアウトすることをお勧めします。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

0
Samuel Chen

文字列型を拡張してインセットメソッドを含めることができます。

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

var s = "new function";
alert(s.insert(4,"insert string "));

それからあなたは関数を呼び出すことができます：

0
mbadeveloper

これは、react/javascriptのインデックスで単語または個々の文字をスタイルしたい場合に私が思い付いたバージョンです。

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;
}
0
Matt Wright

次の関数を使用して、Stringの特定の位置にある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.**
0
Yash

私はこれが古いことを知っていますが、解決策は負のインデックスに対しては機能しないので、パッチを追加します。誰かに役立つことを願っています

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

}
0
cesar moro

これはRegExで簡単に達成できます。

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

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

//< "Hello RegExp"
0
Madmadi

Kth index（0-based index）を'Z'に置き換えたいとしましょう。これを行うにはRegexを使用できます。

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