在 JavaScript 中从字符串中删除子字符串

JavaScript 有两种常用的方法来删除字符串中的子字符串。下面的每个方法都会有一个代码示例,你可以在你的机器上运行。

JavaScript replace() 从字符串中删除特定子字符串的方法

replace() 函数是 JavaScript 的一个内置函数。它用另一个字符串或正则表达式替换给定字符串的一部分。它从一个给定的字符串中返回一个新的字符串,并保持原来的字符串不变。

replace() 语法

Ourstring.replace(Specificvalue, Newvalue)

Specificvalue 将被新的值-Newvalue 替换。

JavaScript replace() 方法示例

<!DOCTYPE html>
<html>
<head>
    <title>
        How to remove a substring from string in JavaScript?
    </title>
</head>
<body>
    <h1>
        DelftStack
    </h1>
    <p>Our string is DelftStac for Software</p>
    <p>
        Our New String is: <span class="output"></span>
    </p>
    <button onclick="removeText()">
        Generate Text
    </button>
    <script type="text/javascript">
        function removeText() {
            ourWord = 'DelftStac for Software';
            ourNewWord = ourWord.replace('DelftStack', '');
            document.querySelector('.output').textContent
                    = ourNewWord;
        }
    </script>
</body>
</html>

JavaScript replace() 方法使用 Regex 从一个字符串中删除所有出现的特定子字符串

在全局属性中使用正则表达式代替 Specificvalue

例:

<!DOCTYPE html>
<html>
<head>
    <title>
        How to remove to remove all occurrences of the specific substring  from string in JavaScript?
    </title>
</head>
<body>
    <h1>
        DelftStack
    </h1>
    <p>Our string is DelftStackforDelftStack</p>
    <p>
        Our New String is: <span class="output"></span>
    </p>
    <button onclick="removeText()">
        Generate Text
    </button>
    <script type="text/javascript">
        function removeText() {
            ourWord = 'DelftStackforDelftStack';
            ourNewWord = ourWord.replace(/DelftStack/g, '');
            document.querySelector('.output').textContent
                    = ourNewWord;
        }
    </script>
</body>
</html>

从字符串中提取特定子字符串的 JavaScript substr() 方法

substr() 函数是 JavaScript 中的一个内置函数,用于从给定的字符串中提取一个子字符串或返回字符串的一部分。它从指定的索引开始,并扩展给定数量的字符。

substr() 语法

string.substr(startIndex, length)

startIndex 是必需的。length 是可选的,是从该 Startindex 中选择的字符串长度,如果没有指定,则提取到字符串的其余部分。

例:

<!DOCTYPE html>
<html>
<head>
    <title>
        How to remove a substring from string in JavaScript?
    </title>
</head>
<body>
    <h1>
        DelftStack
    </h1>
    <p>Our string is DelftStackforDelftStack</p>
    <p>
        Our New String is: <span class="output"></span>
    </p>
    <button onclick="removeText()">
        Generate Text
    </button>
    <script type="text/javascript">
        function removeText() {
            ourWord = 'DelftStackforDelftStack';
            ourNewWord = ourWord.substr(10,13);
            document.querySelector('.output').textContent
                    = ourNewWord;
        }
    </script>
</body>
</html>

在 JavaScript 中从字符串中删除字符

JavaScript 有不同的方法来删除字符串中的特定字符。我们将介绍如何在 JavaScript 中删除字符串中的字符。

在 JavaScript 中使用正则表达式的 replace() 方法

在 JavaScript 中,我们使用正则表达式的 replace() 方法来删除字符串中指定字符的所有实例。

JavaScript replace() 正则表达式语法

replace(/regExp/g, '');

例子:

<!DOCTYPE html>
<html>
<head>
    <title>
       How to remove all instances of the specified character in a string?
    </title>
</head>
<body>
    <h1>
        DelftStack
    </h1>
    <b>
        How to remove all instances of the specified character in a string?
    </b>
    <p>The original string is DelftStack</p>
    <p>
        New Output is:
        <span id="outputWord"></span>
    </p>
    <button onclick="removeCharacterFromString()">
        Remove Character
    </button>
    <script type="text/javascript">
        const removeCharacterFromString = () => {
            originalWord = 'DelftStack';
            newWord = originalWord.replace(/t/g, '');
            document.querySelector('#outputWord').textContent
                    = newWord;
        }
    </script>
</body>
</html>

输出:

The original string is DelftStack
New Output is: DelfSack

在 JavaScript 中删除指定索引处的指定字符

当我们需要删除一个字符时,当一个字符串中有多个该字符的实例时,例如,从字符串 DelftStack 中删除字符 t,我们可以使用 slice() 方法得到给定索引前后的两个字符串,并将其连接起来。

例子:

<!DOCTYPE html>
<html>
<head>
    <title>
       How to remove Specified Character at a Given Index in a string?
    </title>
</head>
<body>
    <h1>
        DelftStack
    </h1>
    <b>
        How to remove Specified Character at a Given Index in a string?
    </b>
    <p>The original string is DelftStack</p>
    <p>
        New Output is:
        <span id="outputWord"></span>
    </p>
    <button onclick="removeCharacterFromString(5)">
        Remove Character
    </button>
    <script type="text/javascript">
        const removeCharacterFromString = (position) => {
            originalWord = 'DelftStack';
            newWord = originalWord.slice(0, position - 1)
            + originalWord.slice(position, originalWord.length);
            document.querySelector('#outputWord').textContent
                    = newWord;
        }
    </script>
</body>
</html>

在 JavaScript 中删除字符串中字符的第一个实例

我们可以使用 replace() 方法,但不使用正则表达式,在 JavaScript 中只删除字符串中的第一个字符实例。我们把要删除的字符作为第一个参数,把空字符串''作为第二个参数。

例子:

<!DOCTYPE html>
<html>
<head>
    <title>
       How to remove First Instance of Character in a string?
    </title>
</head>
<body>
    <h1>
        DelftStack
    </h1>
    <b>
        How to remove First Instance of Character in a string?
    </b>
    <p>The original string is DelftStack</p>
    <p>
        New Output is:
        <span id="outputWord"></span>
    </p>
    <button onclick="removeCharacterFromString()">
        Remove Character
    </button>
    <script type="text/javascript">
        const removeCharacterFromString = () => {
            originalWord = 'DelftStack';
            newWord = originalWord.replace('t', '');
            document.querySelector('#outputWord').textContent
                    = newWord;
        }
    </script>
</body>
</html>

在 JavaScript 中从字符串中删除最后一个字符

在某些情况下,我们必须从字符串中修剪/截断/删除一个字符。由于 JavaScript 中的字符串是不可变的,我们不能修改现有的字符串,但我们必须创建一个具有所需更改的新字符串。我们可以使用各种方法删除最后一个字符,例如正则表达式、获取不包括最后一个字符的子字符串等。我们将看到从 JavaScript 字符串中删除最后一个字符的不同方法。

使用 substring() 函数从 JavaScript 字符串中删除最后一个字符

我们使用 substring() 方法返回两个索引之间的字符串部分。如果仅提供一个索引,则将其视为起始索引,该函数返回该字符串从起始索引到最后一个索引的子字符串。要仅从字符串中删除最后一个字符,我们必须将结尾索引提供为 len - 1,其中 len 是字符串的长度。由于 len-1 是字符串的最后一个索引,我们希望该字符串位于该索引处的字符之前。

const str = "DelftStacks";
const str2 = str.substring(0, str.length - 1);
console.log(str2);

输出:

DelftStack

类似于 substring() 的函数是 substr();它也需要两个参数,但在 substr() 的情况下,第二个参数是子字符串的长度。我们可以通过以下代码使用它来实现相同的结果。

const str = "DelftStacks";
const str2 = str.substr(0, str.length - 1);
console.log(str2);

输出:

DelftStack

虽然它等同于 substring 方法,但仍然避免使用,因为它被认为是遗留方法,使用 substring() 方法更可取。

使用 slice() 方法从 JavaScript 字符串中删除最后一个字符

slice() 方法的工作原理与 substring() 方法非常相似。它还采用起始索引 start_index 和结束索引 end_index 作为参数。显着的区别是我们可以在函数中使用负索引作为参数。通过添加值 str.length 将负索引带入正常范围。我们可以通过传递 0 作为起始索引和 -1 作为结束索引来切掉最后一个字符。

const str = "DelftStacks";
const str2 = str.slice(0, -1);
console.log(str2);

输出:

DelftStack

使用 replace() 方法从 JavaScript 字符串中删除最后一个字符

我们还可以使用 replace() 函数从字符串中删除最后一个字符。它接受一个正则表达式作为输入并替换正则表达式的结果。$ 字符用于匹配输入的结尾。. 用于匹配单个字符。因此,正则表达式 /.$/ 可用于从字符串中获取最后一个字符。在此之后,我们将其替换为 '',即空白,以将其从字符串中删除。

const str = "DelftStacks";
const str2= str.replace(/.$/, '');
console.log(str2);

输出:

DelftStack

在 JavaScript 中从字符串中删除逗号

本教程将解释如何使用 replace()split() 方法从字符串中删除逗号。之后,我们将使用 parseFloat() 将字符串转换为浮点数,从而生成在数学加法期间不会连接的组合字符串。

使用 JavaScript 中的 replace() 方法删除逗号

replace() 方法接受正则表达式模式和替换字符串。它将使用正则表达式模式在字符串中查找逗号,用替换字符串替换逗号。

我们的目标是消除逗号以清空替换字符串。

let string_one = '2,526.23';
let string_two = '33,999.21';
let replaced_string_one = string_one.replace(/,/g, '');
let replaced_string_two = string_two.replace(/,/g, '');
let add_replaced_string = parseFloat(replaced_string_one) + parseFloat(replaced_string_two);
console.log("Replaced string_one: ", replaced_string_one);
console.log("Replaced string_two: ", replaced_string_two);
console.log("Added replaced string: ", add_replaced_string);

输出:

Replaced string_one:  2526.23
Replaced string_two:  33999.21
Added replaced string:  36525.44

在上面的代码中,我们将两个字符串保存在两个变量中。我们想在字符串中添加数字,所以我们用 replace() 方法替换逗号。

替换后,我们使用 parseFloat() 函数将字符串转换为浮点数,以保留字符串中的任何小数点。

使用 JavaScript 中的 split() 方法删除逗号

split 方法将字符串中的逗号作为参数,并返回一个数组。该数组包含的元素是在 split 找到逗号的每个点处的字符串块。

但是,我们需要一个字符串,而不是数组。我们将使用 join() 方法将数组转换为字符串。

一旦数组元素是一个字符串,你可以在添加它们之前对其使用 parseFloat() 函数。

let first_string = '12,222,526.99';
let second_string = '2,821.21';
let replaced_first_string = first_string.split(",").join("");
let replaced_second_string = second_string.split(",").join("");
let add_replaced_string = parseFloat(replaced_first_string) + parseFloat(replaced_second_string);
console.log("Replaced first_string: ", replaced_first_string);
console.log("Replaced second_string: ", replaced_second_string);
console.log("Added replaced string: ", add_replaced_string);

输出:

Replaced first_string:  12222526.99
Replaced second_string:  2821.21
Added replaced string:  12225348.200000001

使用 Lodash Replace 方法删除逗号

Lodash 是一个 JavaScript 库;它有一个接受三个参数的 replace() 方法。这些参数是 stringpatternreplacement

string 应该包含你要替换的内容,pattern 应该匹配你要替换的字符串部分。最后,replacement 根据模式被替换到字符串中。

在下面的代码中,我们使用了 Lodash replace() 方法来替换字符串中的逗号。之后,我们在添加之前对结果字符串使用 parseFloat() 函数。

<body>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
        integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"
        referrerpolicy="no-referrer"
    >
    </script>
    <script type="text/javascript">
        let lodash = _;
        let string_one = '44,321.12';
        let string_two = '1,245.01';
        let replaced_string_one = _.replace(string_one, ',', '');
        let replaced_string_two = _.replace(string_two, ',', '');
        let add_replaced_string = parseFloat(replaced_string_one) + parseFloat(replaced_string_two);
        console.log("Replaced string_one: ", replaced_string_one);
        console.log("Replaced string_two: ", replaced_string_two);
        console.log("Added replaced string: ", add_replaced_string);
    </script>
</body>

输出:

Replaced string_one:  44321.12
Replaced string_two:  1245.01
Added replaced string:  45566.130000000005

在 JavaScript 中从字符串中去除非数字字符

本文介绍了他们如何从字符串变量中删除非数字字符。本文将解释 Regex 的工作原理以及如何使用它。

JavaScript 中的正则表达式

Regex 代表正则表达式。Regex 是 JavaScript 中的对象,由一些特殊模式组成,可以帮助我们匹配多个字符串字符组合。

它们也可以中断或分割一些字符。在程序中编写正则表达式有两种不同的方法。

语法 1:

let re = /ab+c/;

语法 2:

let re = new RegExp('ab+c');

我们在这个代码段中使用 constructor 函数来表示表达式。表达式可以在运行时更改并在运行时编译。

JavaScript 中的 replace() 方法

replace() 函数从存储匹配模式的现有字符串创建一个新字符串。原始字符串保持不变,可以在创建新字符串后访问。

例子:

let q = 'I am dancing while you listen to music';
console.log(q.replace('dancing', 'singing'));
// expected output: "I am dancing while you listen to music"
let regex = /you/i;
console.log(q.replace(regex, 'I'));
// expected output: "I am dancing while I listen to music"
// actual output: "I am dancing while I listen to music"
console.log(q);
// expected output: "I am dancing while you listen to music"
// actual output: "I am dancing while you listen to music"

可以使用此链接或此图像查看输出。

在 JavaScript 中从字符串中去除非数字字符

我们定义了一个字符串变量命名 q。我们将跳舞这两个词替换为唱歌

然后我们显示结果字符串,并且输出也显示为代码作为注释。

在 JavaScript 中使用 replace() 方法从字符串中删除所有非数字字符

我们将在字符串上使用 replace() 函数,只保留整数值并删除非整数值。

例子:

let og = "-123.456abcdefgfijkl";
let updated = og.replace(/[^\d.-]/g, '');
console.log(updated);
//expected output: "-123.456"

该代码段的输出请点击链接,也可以看下图输出。

在 JavaScript 中从字符串中去除非数字字符

我们使用了两个字符串变量。第一个有一些我们想要分离的非数字字符,所以我们创建了另一个变量并使用了 replace() 方法。

\d 用于匹配整数。但是,/g 告诉表达式在第一次替换后继续工作。

JavaScript 中的 match() 方法

match() 函数将字符串与某个正则表达式匹配,并返回与正则表达式匹配的字符串。原始字符串保持不变。

但是,在程序执行期间可以随时访问和使用这个新字符串。返回的字符串将以数组形式返回。

例子:

var og = "-123.456abcdefgfijkl";
var updated = og.match(/\d/g);
console.log(updated);

可以使用此链接访问上述代码段的输出。

在 JavaScript 中从字符串中去除非数字字符

JavaScript 中的 join() 方法

join() 函数将字符串组合成一个字符串。join() 函数将两个或多个字符串一个接一个地连接起来,看起来像一个字符串。

我们在从 Match 函数生成的输出中使用了这个函数,这将为我们提供连接的单个字符串。

例子:

var og = "-123.456abcdefgfijkl";
var updated = og.match(/[\d.-]/g);
var joined = updated.join("");
console.log(joined);

可以使用此链接或在下图中访问上述代码段的输出。

在 JavaScript 中从字符串中去除非数字字符

在 JavaScript 中从字符串中获取第一个字符

在处理字符串时,一些有用的方法可以帮助我们在 JavaScript 中使用和操作字符串的数据结构。本文将指导你使用内置的 JavaScript 方法来获取字符串的第一个字符。

四种方法,slicecharAtsubstringsubstr,在 JavaScript 中可用,它们将返回一个新字符串而不改变原始字符串。

在 JavaScript 中使用 slice() 获取字符串的第一个字符

slice() 方法是 JavaScript 提供的内置方法。

此方法在两个位置切断字符串。这种切割是通过采用两个输入,开始和结束索引来实现的。

基于此,它将返回索引之间的字符串部分。如果只提供了开始索引,它将返回到最后一个字符。

语法:

slice(beginIndex)
slice(beginIndex, endIndex)

beginend 索引中出现的任何字符(包括开始字符和结束前的一个字符)都将插入到新字符串中。结束索引是一个可选参数。

有关更多信息,请阅读 slice() 方法文档。

const inputString = 'Welcome to JavaScript tutorial';
const outputString1 = inputString.slice(0, 1);
const outputString2 = inputString.slice(4, -2);
console.log(outputString1);
console.log(outputString2);

如果我们调用 slice(1, 8),这会将字符 W 从原始字符串 inputString 复制到 outputString1。这里有趣的部分是,当你给出负索引时,输入参数将被视为 str.length + index

上面的代码会给你下面的输出。

输出:

"W"
"ome to JavaScript tutori"

在 JavaScript 中使用 charAt() 获取字符串的第一个字符

此方法获取指定索引处的单个 UTF-16 代码单元。此方法不会改变或修改原始字符串。

语法:

charAt(index)

索引处出现的任何字符都将插入到新字符串中。如果未提供索引,则默认情况下将考虑 0

有关更多信息,请阅读 charAt() 方法文档。

const inputString = 'Welcome to JavaScript tutorial';
const outputString1 = inputString.charAt(0);
const outputString2 = inputString.charAt(11);
console.log(outputString1);
console.log(outputString2);

如果我们调用 charAt(0),这会将字符 W 从原始字符串 inputString 复制到 outputString1。上面的代码会给你下面的输出。

输出:

"W "
"J"

在 JavaScript 中使用 substring() 获取字符串的第一个字符

substring() 方法是 JavaScript 提供的内置方法。

此方法在两个位置切断字符串。这种切割是通过采用两个输入、开始索引和结束索引来实现的。

基于此,它将返回索引之间的字符串部分。如果只提供了起始索引,它将返回字符串的结尾。

语法:

substring(indexStart);
substring(indexStart, indexEnd);

startend 索引中出现的任何字符(包括开始字符和结束前的一个字符)都将插入到新字符串中。结束索引是可选的。

有关更多信息,请阅读 substring() 方法文档。

substring()slice() 之间的唯一区别在于参数。

如果 indexStart 大于 indexEnd,则 substring 方法交换两个参数。这意味着仍然返回一个字符串。

在这种情况下,slice 方法返回一个空字符串。如果任何参数为 negativeNaN,子字符串方法将两个参数都视为 0

slice 也将 NaN 参数视为 0。但是当传递负值时,它会从字符串的末尾开始倒计时以找到索引。

const inputString = 'Hello World!';
const outputString = inputString.substring(0, 1);
console.log(inputString);
console.log(outputString);

如果我们调用 substring(0, 1),这会将字符 H 从原始字符串 inputString 复制到 outputString。最后,我们将使用 console.log() 方法打印两个字符串。

上面的代码会给你下面的输出。

输出:

"Hello World!"
"H"

在 JavaScript 中使用 substr() 获取字符串的第一个字符

substr() 方法是 JavaScript 提供的内置方法。

此方法在两个位置切断字符串。这种切割是通过获取两个输入、开始索引和之后的字符总数来实现的。

并基于此,它将返回索引和总数之间的字符串部分。如果只提供了起始索引,它将返回字符串的结尾。

语法:

substr(start);
substr(start, length);

start 索引和 length 中出现的任何字符都将插入到新字符串中。长度在这里是一个可选参数。

有关更多信息,请阅读 substr() 方法文档。

substring()substr() 之间的唯一区别在于参数。

substring() 方法将起始和结束索引表示为参数。相比之下,substr() 表示作为参数的返回字符串中的起始索引和字符数。

const inputString = 'Hello World!';
const outputString1 = inputString.substr(0, 1);
const outputString2 = inputString.substr(1, 0);
console.log(inputString);
console.log(outputString1);
console.log(outputString2);

如果我们调用 substr(0, 1),这会将字符 H 从原始字符串 inputString 复制到 outputString1。这里有趣的部分是交换输入参数不会复制任何字符,因为长度是 0

上面的代码会给你下面的输出。

输出:

"Hello World!"
"H"
""

在 JavaScript 中从字符串中删除所有空格

要从字符串中删除所有空格:

  1. 调用 replaceAll 方法,将一个包含空格的字符串作为第一个参数传递给它,将一个空字符串作为第二个参数传递给它 – str.replaceAll(' ', '')
  2. replaceAll() 方法返回一个替换了所有匹配项的新字符串。
const str = 'a b c';

const replaced = str.replaceAll(' ', '');
console.log(replaced); // 👉️ 'abc'

我们传递给 String.replaceAll 方法的参数是:

  1. 我们要在字符串中匹配的子字符串。 在我们的例子中,我们想要匹配字符串中的所有空格。
  2. 替换字符串 – 出于我们的目的,一个空字符串

因为我们要删除所有空格,所以我们只需将它们替换为空字符串。

请注意 ,replaceAll() 方法不会更改原始字符串的内容,它会返回一个替换匹配项的新字符串。 字符串在 JavaScript 中是不可变的。

Internet Explorer 版本 6-11 不支持 replaceAll 方法。 如果您需要支持浏览器,请改用替换方法。

要从字符串中删除所有空格:

  1. 调用 replace() 方法,将匹配所有空格的正则表达式作为第一个参数传递给它,并将一个空字符串作为第二个参数传递给它。
  2. replace() 方法将返回一个不包含空格的新字符串。
// Supported in IE 6-11

const str = 'a b c';

const replaced = str.replace(/ /g, '');
console.log(replaced); // 👉️ abc

String.replace 方法采用以下参数:

  1. 我们要在字符串中匹配的正则表达式,在我们的例子中是空格。
  2. 替换字符串,在我们的例子中是一个空字符串

我们使用 g(全局)标志是因为我们想要匹配所有出现的空格,而不仅仅是第一个。

replace() 方法不会更改原始字符串,它返回一个替换了一个或多个匹配项的新字符串。

请注意 ,此正则表达式不匹配制表符和换行符。 如果要删除所有空格、制表符和新行,请改为:

const str = 'a b c';

const replaced = str.replace(/\s/g, '');
console.log(replaced); // 👉️ abc

我们在正则表达式中使用 \s 字符。 特殊字符匹配空格、制表符和换行符。

如果我们需要正则表达式知识点,可以参考我们的正则表达式教程。