首頁(yè) 猿問(wèn) 使用正則表達(dá)式為文本添加樣式

使用正則表達(dá)式為文本添加樣式

JavaScript

森欄 2023-06-09 11:00:56

有一個(gè)文本輸入，如果文本位于兩個(gè)感嘆號(hào)之間，則需要以粗體顯示文本。例如：a!a!bb!c!c將是 a a bb c c。文本位于 ! 將被加粗。這是代碼：const arr = "this! i!s the i!npu!t"; if (arr.includes('!')) { result = arr.replace(/\!(\w+)\!/g, '$1'); }如果有一個(gè)連續(xù)的字符串，它似乎工作正常，但如果它們之間有空格的單詞，它就不能正常工作。有辦法解決嗎？

查看完整描述

4 回答

慕的地10843

TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超8個(gè)贊

首先，你不需要逃跑!。
其次，您替換\w+為[^!]+because \w+is egal [a-zA-Z0-9_]+。

所以，你可以試試下面的正則表達(dá)式。

!([^!]+)!

您的實(shí)現(xiàn)deleteSkid()很好，但是您將值傳遞給 asInputNumber所以defaultValue當(dāng)組件重新渲染時(shí)它不會(huì)改變。只需將其替換為value，它就可以工作。

<InputNumber

min={0}

value={skid[key]}

rules={[

{

required: true,

message: "Please input quantity!"

}

]}

onChange={(newQuantity) => {

updateProductQuantity(skid, key, newQuantity, index);

}}

/>const arr = "this! i!s the i!npu!t";

if (arr.includes('!')) {

result = arr.replace(/!([^!]+)!/g, '$1');

}

console.log(result);

反對(duì) 回復(fù) 2023-06-09

蝴蝶不菲

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊

問(wèn)題是\w不匹配空格，它匹配字母、數(shù)字和下劃線。用于[\w\s]匹配字母、數(shù)字、下劃線或空格：

const arr = "this! i!s the i!npu!t";

const result = arr.replace(/!([\w\s]+)!/g, '$1');

console.log(result);

您可以安全地刪除arr.includes('!')檢查，因?yàn)?replace如果沒(méi)有替換發(fā)生，命令將返回未更改的字符串。問(wèn)題是\w不匹配空格，它匹配字母、數(shù)字和下劃線。用于[\w\s]匹配字母、數(shù)字、下劃線或空格：

const arr = "this! i!s the i!npu!t";

const result = arr.replace(/!([\w\s]+)!/g, '$1');

console.log(result);

您可以安全地刪除arr.includes('!')檢查，因?yàn)?replace如果沒(méi)有替換發(fā)生，命令將返回未更改的字符串。

反對(duì) 回復(fù) 2023-06-09

湖上湖

TA貢獻(xiàn)2003條經(jīng)驗(yàn) 獲得超2個(gè)贊

它不起作用，因?yàn)槟褂玫氖荺w, 當(dāng)您真的想匹配除!. 這樣做的方法是使用[^!].

即, 后跟所有不想[^匹配的字符，再跟.]

更正后的代碼：

const arr = "this! i!s the i!npu!t";

if (arr.includes('!')) {

result = arr.replace(/\!(\w+)\!/g, '$1');

}

反對(duì) 回復(fù) 2023-06-09

UYOU

TA貢獻(xiàn)1878條經(jīng)驗(yàn) 獲得超4個(gè)贊

如果這不匹配! !使空格變?yōu)榇煮w ，并且要在第一個(gè)單詞字符之前開始，! i!您也可以使用 3 個(gè)捕獲組。

如果感嘆號(hào)應(yīng)該配對(duì)，您可以使用正向先行來(lái)斷言可選對(duì)。

(!\s*)(\w+(?:\s+\w+)*)(\s*!)(?=(?:[^!]*![^!]*!)*[^!]*$)

解釋

(!\s*)奪取第一組，比賽！和可選的空白字符
(\w+(?:\s*\w+)*)捕獲第 2 組，匹配 1+ 個(gè)單詞字符并可選擇重復(fù)匹配 1+ 個(gè)空白字符和 1+ 個(gè)單詞字符
(\s*!)捕獲第 3 組，匹配可選的空白字符和 !
(?=(?:[^!]*![^!]*!)*[^!]*$)正面前瞻，斷言可選對(duì)！直到字符串的末尾

正則表達(dá)式演示

如果匹配項(xiàng)應(yīng)在同一行，則可以使用 , 排除否定字符類中的匹配換行符[^!\r\n]，并用于[^\S\r\n]匹配沒(méi)有換行符的空格而不是\s

正則表達(dá)式演示

const regex = /(!\s*)(\w+(?:\s+\w+)*)(\s*!)(?=(?:[^!]*![^!]*!)*[^!]*$)/g;

[

"this! i!s the i!npu!t",

"! !",

"a!a!bb!c!c",

"a!b!c",

"xyz",

].forEach(s => console.log(s.replace(regex, "$1$2$3")));

反對(duì) 回復(fù) 2023-06-09