【jQuery入门】总结如何用replace()替换字符串

replace()方法是什么？

下面就从replace方法的基础知识开始学习吧！replace方法是一种允许您用任何字符替换字符串的方法。

它对一般的字符串有用，但也很方便，因为它很容易获取和替换HTML文本。

此外，它可以用于广泛的应用程序，因为可以使用正则表达式来执行基于复杂条件的替换。

如何使用replace()方法

本章将介绍replace方法的基本使用方法。学习replace的句法和写法，实际的编程方法。

基本语法和写作风格

让我们从基本语法开始吧！replace方法是标准的JavaScript方法，而不是特定于jQuery的方法。

语法如下

目标字符串.replace(替换前的字符串，替换后的字符串)

首先，让我们记住在要替换的字符串上执行replace方法的过程。有两个参数，第一个参数指定替换前的目标字符串，第二个参数设置替换后的新字符串。

您可以在替换前简单地指定字符串中的字符，也可以使用正则表达式添加复杂的条件。

如何替换字符串

现在让我们做一些简单的编程！例如，假设您有这样的 HTML：

<h1>你好词雅网</h1>

如果只想把h1元素的文本中的“你好”部分提取出来，替换成“早上好”，就会像下面这样！

var h1 = $("h1").text();
var result = h1.replace("你好", "早上好");
 
$("h1").text(result);

执行结果

早上好词雅网

首先，获取要替换的字符串，用“$(“h1”)”获取h1标签，用text()方法获取文本内容。对获取的内容执行替换方法。

查看replace方法的参数，您可以看到“你好”部分被提取并替换为“早上好”。

请记住，text()方法需要提取要替换的文本，然后替换它。

类似的替换方法

如何使用replaceAll方法替换字符串

接下来我们来看看jQuery特有的replaceAll方法。首先，让我们检查 replaceAll 方法的语法。

(替换后的内容).replaceAll(替换对象)

查看下面的具体示例。

[HTML]

<ul>
<li>男性</li>
<li>女性</li>
<li>没有回答</li>
</ul>

[jQuery]

$('<li>未填写</li>').replaceAll('li:last');

执行结果

[HTML]

<ul>
<li>男性</li>
<li>女性</li>
<li>未填写</li>
</ul>

请将流程与之前在 JavaScript 中准备的 replace 方法进行比较。在replace方法中，为替换写了三行处理，而在jQuery独有的replaceAll方法中，一行就完成了替换过程。

这是使用 jQuery 库的一大优势。也就是说， jQuery 正在帮助我们简化处理 JavaScript 的麻烦。

具体来说，我将解释 replaceAll 方法的示例代码。replaceAll方法之前描述的$('<li>未填写</li>')部分是替换后的内容。然后，选择器 li:last 被写入以在 replaceAll 方法的参数中指定 li 标记的结尾作为替换目标。

选择器的意思是一种指定标签等元素的机制。这次选择器li:last的意思是“指定标签为li的元素的最后部分”。

如何使用replaceWith方法替换字符串

接下来我们来看看jQuery特有的replaceWith方法。首先是语法。

(替换对象).replaceWith(替换后的内容)

重要的一点是指定替换目标的地方与replaceAll 方法相反。让我们看一下示例代码。

[HTML]

<ul>
<li>男性</li>
<li>女性</li>
<li>没有回答</li>
</ul>

[jQuery]

$('li:last').replaceWith('<li>未填写</li>');

执行结果

[HTML]

<ul>
<li>男性</li>
<li>女性</li>
<li>未填写</li>
</ul>

ReplaceAll与replaceWith处理的作用相同，只是将指定的位置颠倒过来。那么replaceAll和replaceWith方法的区别是什么呢?

那就是replaceWith方法(替换后的内容)中不只有“<li>未填写</li>”这样的要素，还可以加入函数，该函数的返回值可以作为替换后的内容。。

嗯，到底怎么回事?

让我们来看一下具体的例子。

[HTML]

<ul>
<li>男性</li>
<li>女性</li>
<li>没有回答</li>
</ul>

[jQuery]

$('ul').replaceWith(function(idx, html){
    return $('<ol>',{id: 'item' + (idx + 1), html: html})
  .add('<p>有'+$(this).children('li').length + '个选项。</p>')
});

执行结果 

[HTML]

<ol>
<li>男性</li>
<li>女性</li>
<li>没有回答</li>
</ol>
<p>有3个选项。</p>

replaceWith方法后面写了很多东西，我想应该能看到function这个字。这里是函数。

内容的详细处理的说明省略了，在函数中把<ul>标签替换为<ol>标签，再数li标签的元素数(3个)，追加新的<p>标签显示该信息。

对于初学的人来说，replaceWith方法和replaceAll方法的区别在于能否使用函数，记住这一点很重要。

然后，通过学习jQuery的各种知识，像上面的样本一样的代码也能解读，自己也能写，所以请放心。

使用正则表达式替换

最后，我们将说明使用正则表达式的替换处理作为应用内容。

结语

在这篇文章中，我们介绍了替换过程，重点介绍了jQuery的replace方法。

并且有 replaceAll 和 replaceWith 方法作为 jQuery 自己的函数。这两个的重点之一是指定要替换的位置是相反的。如果您以后对更换过程感到困惑，请记住这篇文章。