如何在JavaScript中替换特定索引处的字符?

时间:2009-09-16 05:21:23

标签: javascript string replace character-replacement

我有一个字符串,让我们说Hello world我需要替换索引3处的char。如何通过指定索引来替换char?

var str = "hello world";

我需要像

这样的东西
str.replaceAt(0,"h");

26 个答案:

答案 0 :(得分:530)

在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

答案 1 :(得分:81)

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>

答案 2 :(得分:56)

你做不到。取位置前后的字符并连接成一个新字符串:

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

答案 3 :(得分:29)

这里有很多答案,所有答案都基于两种方法:

  • METHOD1:使用两个子串分割字符串并填充它们之间的字符
  • METHOD2:将字符串转换为字符数组,替换一个数组成员并将其连接

就个人而言,我会在不同情况下使用这两种方法。让我解释一下。

@FabioPhms:你的方法是我最初使用的方法,而且我害怕在有很多字符的字符串上它是坏的。然而,问题是很多角色是什么?我在10“lorem ipsum”段落上进行了测试,花了几毫秒。然后我用10倍大的字符串测试它 - 真的没什么大不同。 HM。

@vsync,@ Cory Mawhorter:你的评论毫不含糊;然而,再一次,什么是大字符串?我同意,对于32 ... 100kb性能应该更好,并且应该使用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*
}

我为此创造了一个小提琴,它是here。 有两个测试,TEST1(子串)和TEST2(阵列转换)。

结果:

  • TEST1:195ms
  • TEST2:6ms

似乎数组转换比子串要好2个数量级!那么 - 到底发生了什么?

实际发生的是TEST2中的所有操作都是在数组本身上完成的,使用strarr2[p] = n之类的赋值表达式。与大字符串上的子字符串相比,分配速度非常快,而且很明显它会赢。

所以,这就是为工作选择合适的工具。试。

答案 4 :(得分:28)

使用矢量通常最有效地联系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);

答案 5 :(得分:26)

在Javascript中,字符串是不可变的,因此您必须执行类似

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

用'h'

替换i中x的字符

答案 6 :(得分:25)

str = str.split('');
str[3] = 'h';
str = str.join('');

答案 7 :(得分:5)

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

答案 8 :(得分:4)

使用带回调的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
})

答案 9 :(得分:3)

这类似于Array.splice

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

答案 10 :(得分:2)

var str = "hello world";
console.log(str);
var arr = [...str];
arr[0] = "H";
str = arr.join("");
console.log(str);

答案 11 :(得分:2)

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

答案 12 :(得分:1)

如果要替换字符串中的字符,则应创建可变字符串。这些本质上是字符数组。你可以创建一个工厂:

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

答案 13 :(得分:1)

您可以使用称为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

答案 14 :(得分:1)

您可以尝试

var strArr = str.split("");

strArr[0] = 'h';

str = strArr.join("");

答案 15 :(得分:1)

我做了一个类似于你所要求的功能的函数,它会检查字符串中的字符是否在一个不允许的字符数组中,如果它用“&#39;

替换它”
    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;
   }

答案 16 :(得分:0)

假设您要将Kth索引(从0开始的索引)替换为'Z'。 您可以使用Regex执行此操作。

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

答案 17 :(得分:0)

我知道这已经过时了,但解决方案不适用于负面索引,所以我添加了一个补丁。希望它可以帮助某人

{{1}}

答案 18 :(得分:0)

这是我想出的一个版本,如果您想在react / javascript中为单词或单个字符的样式设置样式。

private unsafe static void ManipulateIndexedBitmap(Bitmap bitmap)
{
    int bpp = Image.GetPixelFormatSize(bitmap.PixelFormat);

    BitmapData bitmapData = bitmap.LockBits(new Rectangle(Point.Empty, bitmap.Size), ImageLockMode.ReadWrite, bitmap.PixelFormat);
    try
    {
        byte* line = (byte*)bitmapData.Scan0;

        // scanning through the lines
        for (int y = 0; y < bitmapData.Height; y++)
        {
            // scanning through the pixels within the line
            for (int x = 0; x < bitmapData.Width; x++)
            {
                switch (bpp)
                {
                    // a pixel is 1 byte - there are up to 256 palette entries 
                    case 8:
                        line[x] = (byte)TransformColor(line[x]);
                        break;
                    // a pixel is 4 bits - there are up to 16 palette entries
                    case 4:
                        // First pixel is the high nibble
                        int pos = x >> 1;
                        byte nibbles = line[pos];
                        if ((x & 1) == 0)
                        {
                            nibbles &= 0x0F;
                            nibbles |= (byte)(TransformColor(nibbles) << 4);
                        }
                        else
                        {
                            nibbles &= 0xF0;
                            nibbles |= (byte)TransformColor(nibbles >> 4);
                        }

                        line[pos] = nibbles;
                        break;
                    // a pixel is 1 bit - there are exactly two palette entries
                    case 1:
                        // First pixel is MSB.
                        pos = x >> 3;
                        byte mask = (byte)(128 >> (x & 7));
                        if (TransformColor(((line[pos] & mask) == 0) ? 0 : 1) == 0)
                            line[pos] &= (byte)~mask;
                        else
                            line[pos] |= mask;
                        break;
                }
            }

            line += bitmapData.Stride;
        }
    }
    finally
    {
        bitmap.UnlockBits(bitmapData);
    }
}

工作示例:https://codesandbox.io/s/ov7zxp9mjq

replaceAt( yourArrayOfIndexes, yourString/orArrayOfStrings ) 

这是另一种替代方法

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

答案 19 :(得分:0)

这可以通过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"

答案 20 :(得分:0)

推广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使其与for循环中的每个字符匹配。既给定原始字符又给出该字符在字符串中位置的索引,将调用replacer函数。我们做一个简单的if语句来确定是返回origChar还是返回newChar

答案 21 :(得分:0)

您可以首先使用子字符串函数连接目标索引之前和目标索引之后的文本,然后与潜在的字符或字符串连接。这个更好

const myString = "Hello world";
const index = 3;
const stringBeforeIndex = myString.substring(0, index);
const stringAfterIndex = myString.substring(index + 1);
const replaceChar = "X";
myString = stringBeforeIndex + replaceChar + stringAfterIndex;
console.log("New string - ", myString)

const myString = "Hello world";
let index = 3;
myString =  myString.substring(0, index) + "X" + myString.substring(index + 1);

答案 22 :(得分:-1)

您可以扩展字符串类型以包含插入方法:

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

然后你可以调用函数:

答案 23 :(得分:-1)

您可以使用以下函数在字符串的特定位置替换CharacterString。要替换以下所有匹配项,请使用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.**

答案 24 :(得分:-1)

这是我使用三元和映射运算符的解决方案。如果您问我,则更具可读性,可维护性的一端更易于理解。

它更多地涉及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()"/>

答案 25 :(得分:-4)

这里的方法很复杂。 我会这样做:

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

这很简单。