特定のインデックスに文字列を挿入する


333

別の文字列の特定のインデックスに文字列を挿入するにはどうすればよいですか?

 var txt1 = "foo baz"

「foo」の後に「bar」を挿入したい場合、どうすればそれを実現できますか?

と思ったのですsubstring()が、もっと簡単な方法があるに違いありません。


回答:


257

自分のプロトタイプsplice()をStringにプロトタイプできます。

ポリフィル

if (!String.prototype.splice) {
    /**
     * {JSDoc}
     *
     * The splice() method changes the content of a string by removing a range of
     * characters and/or adding new characters.
     *
     * @this {String}
     * @param {number} start Index at which to start changing the string.
     * @param {number} delCount An integer indicating the number of old chars to remove.
     * @param {string} newSubStr The String that is spliced in.
     * @return {string} A new string with the spliced substring.
     */
    String.prototype.splice = function(start, delCount, newSubStr) {
        return this.slice(0, start) + newSubStr + this.slice(start + Math.abs(delCount));
    };
}

String.prototype.splice = function(idx, rem, str) {
    return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
};

var result = "foo baz".splice(4, 0, "bar ");

document.body.innerHTML = result; // "foo bar baz"


編集:rem絶対値になるように修正しました。


6
私はこれが2010年からであることを知っていますが、以下のslice解決策はより良くて簡単です。(スプライスは破壊的ですが、スライスはそうではありません。「知らないオブジェクト」を変更しないことをお勧めします)。このソリューションは、当時は理にかなっているかもしれませんが、目に見える最初の答えであってはなりません。
Eirik Birkeland

6
@EirikBirkeland:文字列は不変です。上記のコードはオブジェクトを変更しません。どちらの方法でも、「知らないオブジェクト」を変更しないという考えは、配列の変異メソッドを排除します。my_array[my_array.length] = item代わりにやりたいと言っていますmy_array.push(item)か?

4
申し訳ありませんが、「所有していないオブジェクト」を意味しました。spliceこの場合、あなたは正しいです。実際、文字列は不変です。このためsplice、キーワードの選択は適切ではないと思います。私の主な反対点は、標準のポリフィルでない限り、プロトタイプを任意に拡張することです。
Eirik Birkeland

1
それはです非常に内蔵されたオブジェクトを変更する悪い習慣。SmooshGateで見たように、新しい機能が言語に追加されると、コードが壊れるリスクがあり、無責任な変更が何らかの形でWeb全体に大きな影響を与えるライブラリに入ると、単純で明確なメソッド名の使用がブロックされる可能性があります新機能のため。
ショーン

401

(たとえば、最初のスペース文字ではなく)特定のインデックスに挿入するには、文字列のスライス/部分文字列を使用する必要があります。

var txt2 = txt1.slice(0, 3) + "bar" + txt1.slice(3);

4
@AlejandroSalamancaMazuelo:substringここで大丈夫でしょう。私sliceは一般にそれがより柔軟であるために好んでいます(負のインデックスなど"foo baz".slice(1, -2))。また、少しだけ価値があるため、少し短くなっています。
Tim Down

8
ES6はより良い代替案を提供しますか?でし少なくとも使用文字列補間など`${txt1.slice(0,3)}bar${txt1.slice(3)}`
ジェイ・

1
これはdelete上記の機能を利用していませんトップ回答 ...
Mr. Polywhirl 2015年

11
@ Mr.Polywhirl:いいえ。質問では、その必要性については触れられていません。
Tim Down

133

他のすべてのプログラミング言語と同じように動作する、私が作成したメソッドは次のとおりです。

String.prototype.insert = function(index, string) {
  if (index > 0)
  {
    return this.substring(0, index) + string + this.substring(index, this.length);
  }

  return string + this;
};

//Example of use:
var something = "How you?";
something = something.insert(3, " are");
console.log(something)

参照:


1
{}if-elseブロックに中括弧を追加する必要がある場合があります。
Mr-IDE、

3
いいえ、必要はありません。しかし、それelseは冗長です。
Bitterblue

72

次の関数を作成するだけです。

function insert(str, index, value) {
    return str.substr(0, index) + value + str.substr(index);
}

そしてそれをそのように使います:

alert(insert("foo baz", 4, "bar "));

出力:foo bar baz

C#(Sharp)のString.Insert(int startIndex、string value)のように正確に動作します。

注:この挿入関数は、文字列str(最初のパラメーター)の指定された整数インデックス(2 番目のパラメーター)の前に文字列(3番目のパラメーター)を挿入し、strを変更せずに新しい文字列を返します


16

UPDATE 2016:これは、ワンライナーアプローチ(プリペンドサポートまたはネガティブを使用)に基づく別の楽しみの(しかしより深刻な!)プロトタイプ関数です。RegExpundefinedindex

/**
 * Insert `what` to string at position `index`.
 */
String.prototype.insert = function(what, index) {
    return index > 0
        ? this.replace(new RegExp('.{' + index + '}'), '$&' + what)
        : what + this;
};

console.log( 'foo baz'.insert('bar ', 4) );  // "foo bar baz"
console.log( 'foo baz'.insert('bar ')    );  // "bar foo baz"

以前(2012年まで)の楽しいソリューション:

var index = 4,
    what  = 'bar ';

'foo baz'.replace(/./g, function(v, i) {
    return i === index - 1 ? v + what : v;
});  // "foo bar baz"

1
これは、文字列の複数のインデックスにテキストを挿入する必要がある場合にも便利です。その場合は、以下の私の答えを参照してください。
Jake Stoeffler、2014

12

誰かが文字列の複数のインデックスにテキストを挿入する方法を探しているなら、これを試してください:

String.prototype.insertTextAtIndices = function(text) {
    return this.replace(/./g, function(character, index) {
        return text[index] ? text[index] + character : character;
    });
};

たとえば、これを使用<span>して、文字列の特定のオフセットにタグを挿入できます。

var text = {
    6: "<span>",
    11: "</span>"
};

"Hello world!".insertTextAtIndices(text); // returns "Hello <span>world</span>!"

1
私はこの方法を試しましたが、「6」と「11」を機能しない変数に置き換えました-私が間違っていること-助けてください。前もって感謝します:)
Dex Dave

1
6と11は、テキストが文字列に挿入されるインデックスです。 6: "<span>"言う:インデックス6に、テキスト「<span>」を挿入します。整数変数の値を挿入インデックスとして使用したいですか?その場合は、次のような方法を試してくださいvar a=6, text = {}; text[a] = "<span>";
Jake Stoeffler、

1
はい、整数変数を挿入として使用したいのですが、あなたの方法はうまくいきました-ありがとう-これは私がvar a = 6を使用したものです; var b = 11; テキスト= {}; テキスト[a] = "xx";テキスト[b] = "yy"; -書き込みへのより良い方法は、しかしことがある
Dexのデイブ

11

これは基本的に@ Bass33が行っていることを行っていますが、最後から数えるために負のインデックスを使用するオプションも提供しています。substrメソッドが許可するようなものです。

// use a negative index to insert relative to the end of the string.

String.prototype.insert = function (index, string) {
  var ind = index < 0 ? this.length + index  :  index;
  return  this.substring(0, ind) + string + this.substring(ind, this.length);
};

使用例:命名規則を使用してフルサイズの画像があるが、サムネイルのURLも提供するようにデータを更新できないとします。

var url = '/images/myimage.jpg';
var thumb = url.insert(-4, '_thm');

//    result:  '/images/myimage_thm.jpg'

9

あなたの現在の例を考えると、あなたはどちらかによって結果を達成することができます

var txt2 = txt1.split(' ').join(' bar ')

または

var txt2 = txt1.replace(' ', ' bar ');

しかし、そのような仮定をすることができれば、グレンの例に直接スキップすることもできます。

文字インデックスベース以外の仮定を実際に行うことができない状況では、実際に部分文字列ソリューションを使用します。



6

私はこれが古いスレッドであることを知っていますが、これは本当に効果的なアプローチです。

var tn = document.createTextNode("I am just  to help")
t.insertData(10, "trying");

これの素晴らしい点は、ノードのコンテンツを強制することです。したがって、このノードがすでにDOM上にある場合は、クエリセレクターを使用したり、innerTextを更新したりする必要はありません。変更は、その拘束力のために反映されます。

文字列が必要な場合は、ノードのテキストコンテンツプロパティにアクセスするだけです。

tn.textContent
#=> "I am just trying to help"

6

そうですね、substringメソッドとsliceメソッドの両方を使用できます。

String.prototype.customSplice = function (index, absIndex, string) {
    return this.slice(0, index) + string+ this.slice(index + Math.abs(absIndex));
};


String.prototype.replaceString = function (index, string) {
    if (index > 0)
        return this.substring(0, index) + string + this.substring(index, this.length);

    return string + this;
};


console.log('Hello Developers'.customSplice(6,0,'Stack ')) // Hello Stack Developers
console.log('Hello Developers'.replaceString(6,'Stack ')) //// Hello Stack Developers

部分文字列メソッドの唯一の問題は、負のインデックスでは機能しないことです。常に0番目の位置から文字列インデックスを取得します。


absIndexの目的は何ですか?
エンリケベルムデス

ところで、2番目の方法をありがとう。それは魅力のように機能します!
エンリケベルムデス

5
function insertString(string, insertion, place) {
  return string.replace(string[place] + string[place + 1], string[place] + insertion + string[place + 1])
}

だから、あなたのために、それは insertString("foo baz", "bar", 3);

当然のことながら、毎回関数に文字列を提供する必要があるため、これは使用するペイントになりますが、現時点では、それをのような簡単なものにする方法がわかりませんstring.replace(insertion, place)。しかし、その考えはまだ残っています。


4

動的パターンで正規表現を使用できます。

var text = "something";
var output = "                    ";
var pattern = new RegExp("^\\s{"+text.length+"}");
var output.replace(pattern,text);

出力:

"something      "

これtext.lengthにより、文字列の先頭にある空白文字が置き換えられますoutputRegExp手段^\-ラインの始まり\sの任意の空白文字、繰り返し{n}この場合回、text.length。文字列からこの種のパターンを構築するときにバックスラッシュ\\\エスケープするために使用します。


3

別の解決策として、弦を2に切り、その間に弦を挿入します。

var str = jQuery('#selector').text();

var strlength = str.length;

strf = str.substr(0 , strlength - 5);
strb = str.substr(strlength - 5 , 5);

jQuery('#selector').html(strf + 'inserted' + strb);

3

あなたは1行のコードで正規表現でそれを簡単に行うことができます

const str = 'Hello RegExp!';
const index = 6;
const insert = 'Lovely ';
    
//'Hello RegExp!'.replace(/^(.{6})(.)/, `$1Lovely $2`);
const res = str.replace(new RegExp(`^(.{${index}})(.)`), `$1${insert}$2`);
    
console.log(res);

「こんにちは素敵なRegExp!」


2

スライスを使用する

使用できますslice(0,index) + str + slice(index)。または、そのためのメソッドを作成できます。

String.prototype.insertAt = function(index,str){
  return this.slice(0,index) + str + this.slice(index)
}
console.log("foo bar".insertAt(4,'baz ')) //foo baz bar

文字列の接続方法

あなたsplit()はメインの文字列を追加して通常を使用できますsplice()

String.prototype.splice = function(index,del,...newStrs){
  let str = this.split('');
  str.splice(index,del,newStrs.join('') || '');
  return str.join('');
}


 var txt1 = "foo baz"

//inserting single string.
console.log(txt1.splice(4,0,"bar ")); //foo bar baz


//inserting multiple strings
console.log(txt1.splice(4,0,"bar ","bar2 ")); //foo bar bar2 baz


//removing letters
console.log(txt1.splice(1,2)) //f baz


//remving and inseting atm
console.log(txt1.splice(1,2," bar")) //f bar baz

複数のインデックスでのsplice()の適用

このメソッドは、配列の配列を取り、配列の各要素は単一のを表しsplice()ます。

String.prototype.splice = function(index,del,...newStrs){
  let str = this.split('');
  str.splice(index,del,newStrs.join('') || '');
  return str.join('');
}


String.prototype.mulSplice = function(arr){
  str = this
  let dif = 0;
  
  arr.forEach(x => {
    x[2] === x[2] || [];
    x[1] === x[1] || 0;
    str = str.splice(x[0] + dif,x[1],...x[2]);
    dif += x[2].join('').length - x[1];
  })
  return str;
}

let txt = "foo bar baz"

//Replacing the 'foo' and 'bar' with 'something1' ,'another'
console.log(txt.splice(0,3,'something'))
console.log(txt.mulSplice(
[
[0,3,["something1"]],
[4,3,["another"]]
]

))


1

部分文字列を使用する方法とスライスを使用する方法をそれぞれBase33とuser113716から比較して、コードを記述したかった

これも見てください パフォーマンス比較、サブストリング、スライス

私が使用したコードは巨大な文字列を作成し、文字列「bar」を巨大な文字列に複数回挿入します

if (!String.prototype.splice) {
    /**
     * {JSDoc}
     *
     * The splice() method changes the content of a string by removing a range of
     * characters and/or adding new characters.
     *
     * @this {String}
     * @param {number} start Index at which to start changing the string.
     * @param {number} delCount An integer indicating the number of old chars to remove.
     * @param {string} newSubStr The String that is spliced in.
     * @return {string} A new string with the spliced substring.
     */
    String.prototype.splice = function (start, delCount, newSubStr) {
        return this.slice(0, start) + newSubStr + this.slice(start + Math.abs(delCount));
    };
}

String.prototype.splice = function (idx, rem, str) {
    return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
};


String.prototype.insert = function (index, string) {
    if (index > 0)
        return this.substring(0, index) + string + this.substring(index, this.length);

    return string + this;
};


function createString(size) {
    var s = ""
    for (var i = 0; i < size; i++) {
        s += "Some String "
    }
    return s
}


function testSubStringPerformance(str, times) {
    for (var i = 0; i < times; i++)
        str.insert(4, "bar ")
}

function testSpliceStringPerformance(str, times) {
    for (var i = 0; i < times; i++)
        str.splice(4, 0, "bar ")
}


function doTests(repeatMax, sSizeMax) {
    n = 1000
    sSize = 1000
    for (var i = 1; i <= repeatMax; i++) {
        var repeatTimes = n * (10 * i)
        for (var j = 1; j <= sSizeMax; j++) {
            var actualStringSize = sSize *  (10 * j)
            var s1 = createString(actualStringSize)
            var s2 = createString(actualStringSize)
            var start = performance.now()
            testSubStringPerformance(s1, repeatTimes)
            var end = performance.now()
            var subStrPerf = end - start

            start = performance.now()
            testSpliceStringPerformance(s2, repeatTimes)
            end = performance.now()
            var splicePerf = end - start

            console.log(
                "string size           =", "Some String ".length * actualStringSize, "\n",
                "repeat count          = ", repeatTimes, "\n",
                "splice performance    = ", splicePerf, "\n",
                "substring performance = ", subStrPerf, "\n",
                "difference = ", splicePerf - subStrPerf  // + = splice is faster, - = subStr is faster
                )

        }
    }
}

doTests(1, 100)

パフォーマンスの一般的な違いはせいぜいわずかであり、両方の方法がうまく機能します(長さが~~ 12000000の文字列でも)


0
  1. 文字列から配列をインスタンス化します
  2. Array#spliceを使用
  3. Array#joinを使用して再度文字列化

このアプローチの利点は2つあります。

  1. シンプルな
  2. Unicodeコードポイントに準拠

const pair = Array.from('USDGBP')
pair.splice(3, 0, '/')
console.log(pair.join(''))

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.