aboutsummaryrefslogtreecommitdiff
path: root/files/vi/web/javascript/reference/global_objects/string/replace/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/vi/web/javascript/reference/global_objects/string/replace/index.html')
-rw-r--r--files/vi/web/javascript/reference/global_objects/string/replace/index.html233
1 files changed, 233 insertions, 0 deletions
diff --git a/files/vi/web/javascript/reference/global_objects/string/replace/index.html b/files/vi/web/javascript/reference/global_objects/string/replace/index.html
new file mode 100644
index 0000000000..b9d5330c6c
--- /dev/null
+++ b/files/vi/web/javascript/reference/global_objects/string/replace/index.html
@@ -0,0 +1,233 @@
+---
+title: String.prototype.replace()
+slug: Web/JavaScript/Reference/Global_Objects/String/replace
+translation_of: Web/JavaScript/Reference/Global_Objects/String/replace
+---
+<div>{{JSRef}}</div>
+
+<p>Phương thức <strong><code>replace()</code></strong> sẽ trả về một chuỗi mới với một vài (hoặc tất cả) phần tử trùng khớp với <code>pattern</code> được thay thế bằng <code>replacement</code>. Pattern có thể là một chuỗi, hoặc một {{jsxref("RegExp")}}, và replacement có thể là một chuỗi, hoặc một function được gọi áp dụng cho mỗi kết quả trùng khớp. Nếu pattern là một chuỗi, thì phương thức replace() chỉ trả về kết quả đầu tiên trùng khớp.</p>
+
+<p>Replace() không làm thay đổi chuỗi gốc.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-replace.html")}}</div>
+
+
+
+<h2 id="Cú_pháp">Cú pháp</h2>
+
+<pre class="syntaxbox notranslate">const newStr = <var>str</var>.replace(<var>regexp</var>|<var>substr</var>, <var>newSubstr</var>|<var>function</var>)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code><var>regexp</var></code> (pattern)</dt>
+ <dd>Một {{jsxref("RegExp")}} object hoặc biểu thức RegEx. Phần tử được match sẽ được thay thế bởi <code><var>newSubstr</var></code> hoặc giá trị trả về bởi <code><var>function</var></code>.</dd>
+ <dt><code><var>substr</var></code></dt>
+ <dd>Một {{jsxref("String")}} cái mà sẽ bị thay thế bởi <code><var>newSubstr</var></code>. String này sẽ được xem như là một literal string và không phải là một regular expression. Nên chỉ có phần tử trùng khớp đầu tiên sẽ bị thay thế.</dd>
+ <dt><code><var>newSubstr</var></code> (replacement)</dt>
+ <dd>Một {{jsxref("String")}} có nhiệm vụ thay thế substr được chỉ định trong <code><var>regexp</var></code> hoặc <code><var>substr</var></code>. Có nhiều kiểu thay thế khác nhau, xem chi tiết tại phần "<a href="#Specifying_a_string_as_a_parameter">Specifying a string as a parameter</a>" bên dưới.</dd>
+ <dt><code><var>function</var></code> (replacement)</dt>
+ <dd>Function được định nghĩa và gọi để sử dụng cho việc thay thế các phần tử trùng khớp với regexp hoặc substr. Đối số của function này có thể là các loại sau, xem chi tiết tại phần: "<a href="#Specifying_a_function_as_a_parameter">Specifying a function as a parameter</a>" bên dưới.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Một string mới, với một số phần tử trùng khớp (hoặc tất cả phần tử trùng khớp) đã bị thay thế bởi các replacement.</p>
+
+<h2 id="Mô_tả">Mô tả</h2>
+
+<p>Phương thức này không làm thay đổi {{jsxref("String")}} gốc. Nó chỉ đơn giản tạo ra một string mới.</p>
+
+<p>Để thực hiện tìm kiếm global search và replace, hãy thêm từ khóa <code>g</code> và biểu thức regular expression.</p>
+
+<h3 id="Specifying_a_string_as_a_parameter">Specifying a string as a parameter</h3>
+
+<p>The replacement string can include the following special replacement patterns:</p>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th class="header" scope="col">Pattern</th>
+ <th class="header" scope="col">Inserts</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>$$</code></td>
+ <td>Inserts a <code>"$"</code>.</td>
+ </tr>
+ <tr>
+ <td><code>$&amp;</code></td>
+ <td>Inserts the matched substring.</td>
+ </tr>
+ <tr>
+ <td><code>$`</code></td>
+ <td>Inserts the portion of the string that precedes the matched substring.</td>
+ </tr>
+ <tr>
+ <td><code>$'</code></td>
+ <td>Inserts the portion of the string that follows the matched substring.</td>
+ </tr>
+ <tr>
+ <td><code>$<var>n</var></code></td>
+ <td>Where <code><var>n</var></code> is a positive integer less than 100, inserts the <code><var>n</var></code>th parenthesized submatch string, provided the first argument was a {{jsxref("RegExp")}} object. Note that this is <code>1</code>-indexed.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="Specifying_a_function_as_a_parameter">Specifying a function as a parameter</h3>
+
+<p>You can specify a function as the second parameter. In this case, the function will be invoked after the match has been performed. The function's result (return value) will be used as the replacement string. (<strong>Note:</strong> The above-mentioned special replacement patterns do <em>not</em> apply in this case.)</p>
+
+<p>Note that the function will be invoked multiple times for each full match to be replaced if the regular expression in the first parameter is global.</p>
+
+<p>The arguments to the function are as follows:</p>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th class="header" scope="col">Possible name</th>
+ <th class="header" scope="col">Supplied value</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>match</code></td>
+ <td>The matched substring. (Corresponds to <code>$&amp;</code> above.)</td>
+ </tr>
+ <tr>
+ <td><code>p1, p2, ...</code></td>
+ <td>The <var>n</var>th string found by a parenthesized capture group, provided the first argument to <code>replace()</code> was a {{jsxref("RegExp")}} object. (Corresponds to <code>$1</code>, <code>$2</code>, etc. above.) For example, if <code>/(\a+)(\b+)/</code>, was given, <code>p1</code> is the match for <code>\a+</code>, and <code>p2</code> for <code>\b+</code>.</td>
+ </tr>
+ <tr>
+ <td><code>offset</code></td>
+ <td>The offset of the matched substring within the whole string being examined. (For example, if the whole string was <code>'abcd'</code>, and the matched substring was <code>'bc'</code>, then this argument will be <code>1</code>.)</td>
+ </tr>
+ <tr>
+ <td><code>string</code></td>
+ <td>The whole string being examined.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>(The exact number of arguments depends on whether the first argument is a {{jsxref("RegExp")}} object—and, if so, how many parenthesized submatches it specifies.)</p>
+
+<p>The following example will set <code>newString</code> to <code>'abc - 12345 - #$*%'</code>:</p>
+
+<pre class="brush: js notranslate">function replacer(match, p1, p2, p3, offset, string) {
+ // p1 is nondigits, p2 digits, and p3 non-alphanumerics
+ return [p1, p2, p3].join(' - ');
+}
+let newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
+console.log(newString); // abc - 12345 - #$*%
+</pre>
+
+<h2 id="Ví_dụ">Ví dụ</h2>
+
+<h3 id="Định_nghĩa_một_biểu_thức_regular_expression_trong_phương_thức_replace">Định nghĩa một biểu thức regular expression trong phương thức replace()</h3>
+
+<p>Ví dụ bên dưới, regular expression được định nghĩa trong <code>replace()</code> và nó có thêm flat "i" (giúp kết quả matching không phân biệt chữ hoa và chữ thường).</p>
+
+<pre class="brush: js notranslate">let str = 'Twas the night before Xmas...';
+let newstr = str.replace(/xmas/i, 'Christmas');
+console.log(newstr); // Twas the night before Christmas...
+</pre>
+
+<p>This logs <code>'Twas the night before Christmas...'</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> See <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">this guide</a> for more explanations about regular expressions.</p>
+</div>
+
+<h3 id="Sử_dụng_flag_global_và_flag_ignore_trong_replace">Sử dụng flag global và flag ignore trong replace()</h3>
+
+<p>Global replace (thay thế tất cả kết quả trùng khớp) có thể được thực hiện trong regex. Ví dụ sau, biểu thức regex có chứa các flag  <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags_2">global and ignore case flags</a> cho phép <code>replace()</code> sẽ thay thế mỗi string <code>'apples'</code> trong chuỗi gốc với string <code>'oranges'</code>. </p>
+
+<pre class="brush: js notranslate">let re = /apples/gi;
+let str = 'Apples are round, and apples are juicy.';
+let newstr = str.replace(re, 'oranges');
+console.log(newstr); // oranges are round, and oranges are juicy.
+</pre>
+
+<p>This logs <code>'oranges are round, and oranges are juicy'</code>.</p>
+
+<h3 id="Đảo_ngược_vị_trí_của_2_từ_trong_một_string">Đảo ngược vị trí của 2 từ trong một string</h3>
+
+<p>Đoạn code bên dưới sẽ đảo qua lại vị trí của các từ trong một string. Ở phần replacement, đoạn code sử dụng <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">capturing groups</a> và ký tự <code>$1,$2</code> để làm pattern cho phần replacement.</p>
+
+<pre class="brush: js notranslate">let re = /(\w+)\s(\w+)/;
+let str = 'John Smith';
+let newstr = str.replace(re, '$2, $1');
+console.log(newstr); // Smith, John
+</pre>
+
+<p>This logs <code>'Smith, John'</code>.</p>
+
+<h3 id="Sử_dụng_một_inline_function_để_thay_đổi_các_giá_trị_matched">Sử dụng một inline function để thay đổi các giá trị matched</h3>
+
+<p>Trong ví dụ này, tất cả trường hợp chữ cái viết hoa trong một string sẽ được convert sang dạng viết thường, và dấu gạch ngang sẽ được thêm vào trước vị trí matching đó. Điều quan trọng ở đây, là cần thêm vào các dấu gạch ngang này trước khi trả về một replacement hoàn chỉnh để sử dụng.</p>
+
+<p>Replacement function này sẽ nhận vào các đoạn trích mà đã match với pattern làm tham số, và sử dụng các đoạn trích đó để biến đổi chữ hoa chữ thường, và ghép nối một dấu gạch ngang vào trước mỗi đoạn trích.</p>
+
+<pre class="brush: js notranslate">function styleHyphenFormat(propertyName) {
+ function upperToHyphenLower(match, offset, string) {
+ return (offset &gt; 0 ? '-' : '') + match.toLowerCase();
+ }
+ return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
+}
+</pre>
+
+<p>Given <code>styleHyphenFormat('borderTop')</code>, this returns <code>'border-top'</code>.</p>
+
+<p>Because we want to further transform the <em>result</em> of the match before the final substitution is made, we must use a function. This forces the evaluation of the match prior to the {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} method. If we had tried to do this using the match without a function, the {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} would have no effect.</p>
+
+<pre class="brush: js example-bad notranslate">let newString = propertyName.replace(/[A-Z]/g, '-' + '$&amp;'.toLowerCase()); // won't work
+</pre>
+
+<p>This is because <code>'$&amp;'.toLowerCase()</code> would first be evaluated as a string literal (resulting in the same <code>'$&amp;'</code>) before using the characters as a pattern.</p>
+
+<h3 id="Replacing_a_Fahrenheit_degree_with_its_Celsius_equivalent">Replacing a Fahrenheit degree with its Celsius equivalent</h3>
+
+<p>The following example replaces a Fahrenheit degree with its equivalent Celsius degree. The Fahrenheit degree should be a number ending with <code>"F"</code>. The function returns the Celsius number ending with <code>"C"</code>. For example, if the input number is <code>"212F"</code>, the function returns <code>"100C"</code>. If the number is <code>"0F"</code>, the function returns <code>"-17.77777777777778C"</code>.</p>
+
+<p>The regular expression <code>test</code> checks for any number that ends with <code>F</code>. The number of Fahrenheit degree is accessible to the function through its second parameter, <code>p1</code>. The function sets the Celsius number based on the Fahrenheit degree passed in a string to the <code>f2c()</code> function. <code>f2c()</code> then returns the Celsius number. This function approximates Perl's <code>s///e</code> flag.</p>
+
+<pre class="brush: js notranslate">function f2c(x) {
+ function convert(str, p1, offset, s) {
+ return ((p1 - 32) * 5/9) + 'C';
+ }
+ let s = String(x);
+ let test = /(-?\d+(?:\.\d*)?)F\b/g;
+ return s.replace(test, convert);
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.replace")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.replaceAll", "String.prototype.replaceAll()")}}</li>
+ <li>{{jsxref("String.prototype.match", "String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec", "RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test", "RegExp.prototype.test()")}}</li>
+</ul>