ฉันจะแทนที่อักขระที่ดัชนีเฉพาะใน 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

ไม่มีreplaceAtฟังก์ชั่นใน JavaScript คุณสามารถใช้รหัสต่อไปนี้เพื่อแทนที่ตัวละครใด ๆ ในสายใด ๆ ที่ตำแหน่งที่ระบุ:

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: แบ่งสตริงโดยใช้สตริงย่อยสองรายการและใช้อักขระระหว่างกัน
• วิธีที่ 2: แปลงสตริงเป็นอาร์เรย์อักขระแทนที่สมาชิกอาเรย์หนึ่งตัวและเข้าร่วม

โดยส่วนตัวฉันจะใช้สองวิธีนี้ในกรณีที่แตกต่างกัน ให้ฉันอธิบาย

@ FabioPhms: วิธีการของคุณเป็นวิธีแรกที่ฉันใช้และฉันกลัวว่ามันจะไม่ดีในสายอักขระที่มีจำนวนมาก อย่างไรก็ตามคำถามคือตัวละครจำนวนมากคืออะไร? ฉันทดสอบในย่อหน้า 10 "lorem ipsum" และใช้เวลาไม่กี่มิลลิวินาที จากนั้นฉันทดสอบบนสตริงที่มีขนาดใหญ่กว่า 10 เท่า - มันไม่มีความแตกต่างกันมากนัก ฮึ่ม

@vsync, @Cory Mawhorter: ความคิดเห็นของคุณไม่น่าสงสัย อย่างไรก็ตามอีกครั้งสตริงขนาดใหญ่คืออะไร? ฉันยอมรับว่าสำหรับประสิทธิภาพ 32 ... 100kb ควรดีกว่าและควรใช้ substring-variant สำหรับการเปลี่ยนอักขระหนึ่งครั้ง

แต่จะเกิดอะไรขึ้นถ้าฉันต้องเปลี่ยนใหม่ไม่กี่ครั้ง?

ฉันต้องทำการทดสอบของตัวเองเพื่อพิสูจน์ว่าอะไรเร็วขึ้นในกรณีนั้น สมมติว่าเรามีอัลกอริทึมที่จะจัดการสตริงที่ค่อนข้างสั้นซึ่งประกอบด้วยอักขระ 1,000 ตัว เราคาดว่าโดยเฉลี่ยอักขระแต่ละตัวในสตริงนั้นจะถูกแทนที่ ~ 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 (การแปลงอาร์เรย์)

ผล:

• TEST1: 195ms
• TEST2: 6ms

ดูเหมือนว่าการแปลงอาเรย์จะเต้นย่อยด้วย 2 ขนาดของคำสั่ง! ดังนั้น - เกิดอะไรขึ้นที่นี่ ???

สิ่งที่เกิดขึ้นจริงคือว่าการดำเนินการทั้งหมดใน TEST2 strarr2[p] = nจะทำในอาร์เรย์ตัวเองโดยใช้การแสดงออกที่ได้รับมอบหมายเช่น การมอบหมายนั้นเร็วมากเมื่อเปรียบเทียบกับสตริงย่อยบนสตริงขนาดใหญ่และชัดเจนว่ามันจะชนะ

ดังนั้นมันคือทั้งหมดที่เกี่ยวกับการเลือกเครื่องมือที่เหมาะสมสำหรับงาน อีกครั้ง

การทำงานกับเวกเตอร์มักจะมีประสิทธิภาพมากที่สุดในการติดต่อ 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);

ในสตริง Javascript นั้นไม่เปลี่ยนรูปดังนั้นคุณต้องทำอะไรบางอย่าง

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

เมื่อต้องการแทนที่อักขระใน x at i ด้วย '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);
};

คุณสามารถลอง

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

ลองขยายและอธิบายทั้งนิพจน์ปกติและฟังก์ชันตัวแทนที่:

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ทำให้มันตรงกับตัวละครทุกตัวในห่วง replacerฟังก์ชั่นที่เรียกว่าได้รับทั้งสองตัวละครเดิมและดัชนีของที่ตัวละครที่อยู่ในสตริง เราทำให้ง่ายifคำสั่งให้ตรวจสอบว่าเรากำลังจะกลับมาอย่างใดอย่างหนึ่งหรือorigCharnewChar

คุณสามารถขยายประเภทสตริงเพื่อรวมวิธีการแทรก:

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-based) 'Z'ด้วย คุณสามารถใช้Regexการทำเช่นนี้

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

คุณสามารถใช้ฟังก์ชั่นต่อไปนี้เพื่อแทนที่CharacterหรือStringตำแหน่งใดตำแหน่งหนึ่งของสตริง เพื่อแทนที่กรณีการแข่งขันต่อไปนี้ทั้งหมดให้ใช้String.prototype.replaceAllMatches()ฟังก์ชัน

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

มันง่ายเหมือนที่ได้รับ