특정 색인에 문자열 삽입


333

다른 문자열의 특정 색인에 문자열을 삽입하려면 어떻게해야합니까?

 var txt1 = "foo baz"

"foo"뒤에 "bar"를 삽입하고 싶다면 어떻게해야합니까?

나는 생각 substring()했지만 더 간단하고 직접적인 방법이 있어야합니다.


답변:


257

자신 만의 splice()문자열을 프로토 타입으로 만들 수 있습니다 .

폴리 필

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 에서 보았 듯이 , 새로운 기능이 언어에 추가 될 때 코드 가 깨질 위험이 있습니다. 에서 무심코 수정이 라이브러리에 들어가면 간단하고 명확한 메소드 이름 사용을 차단할 수 있습니다 새로운 기능.

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)}`
Jay

1
이것은 위에delete 포함 된 기능을 사용하지 않습니다 . 최고 답변 ...
Mr. Polywhirl

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 (첫 번째 매개 변수)에서 지정된 정수 색인 (두 번째 매개 변수) 앞에 문자열 (세 번째 매개 변수)을 삽입 한 다음 str 을 변경하지 않고 새 문자열을 리턴합니다 !


16

업데이트 2016 : 다음은 하나의 라이너 접근 방식 (prepend support on 또는 negative )을 기반으로 한 또 다른 재미 있지만 더 심각한 프로토 타입 기능입니다 .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

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 Dave

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

그러나 그러한 가정을 할 수 있다면 Gullen의 예제로 직접 건너 뛸 수도 있습니다.

문자 인덱스 기반 이외의 다른 가정을 할 수없는 상황에서는 실제로 하위 문자열 솔루션을 사용하려고합니다.



6

나는 이것이 오래된 스레드라는 것을 알고 있지만 여기에는 실제로 효과적인 접근법이 있습니다.

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

이것의 장점은 노드 컨텐츠를 강제한다는 것입니다. 따라서이 노드가 이미 DOM에있는 경우 쿼리 선택기를 사용하거나 innerText를 업데이트 할 필요가 없습니다. 바인딩으로 인해 변경 사항이 반영됩니다.

문자열이 필요하면 간단히 노드의 text content 속성에 액세스하십시오.

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

6

하위 문자열과 슬라이스 방법을 모두 사용할 수 있습니다.

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는 무엇을 의미합니까?
Enrique Bermúdez

Btw, 두 번째 방법에 감사드립니다. 그것은 매력처럼 작동합니다!
Enrique Bermúdez

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문자열 시작 부분의 공백 문자를 대체 합니다 output. RegExp수단 ^\- 라인의 시작\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

한 줄의 코드로 정규 표현식으로 쉽게 할 수 있습니다.

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

"안녕하세요 Lovely 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 인 문자열에서도).


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.