如何使用正則表達式和JavaScript在字符串中找到匹配的字符串？

Question

我試圖匹配字符串中的模式，並獲取匹配子字符串的一部分。

我想做什么？

考慮字符串

I am <user-name id="3" text="myname lname"/> <user-name id="32" text="name1 name2"/> 

我想匹配字符串

<user-name id="3" text="myname lname"/>和
<user-name id="32" text="name1 name2"/>

並獲取文本屬性的值。

因此，從上面匹配的子字符串中，我需要值“ myname lname”和“ name1 name2”

我想從原始字符串中提取這些值並創建如下所示的字符串，

"I am myname lname name1 name2"

同樣，來自text屬性的值應以粗體顯示

所以最終的字符串應如下所示，

I am <strong>myname lname</strong> <strong>name1 name2</strong>

我想做什么？

由於我不熟悉正則表達式，因此我嘗試逐步進行操作。

所以我開始首先匹配下面的模式

let str1 = str.match(/\<(user-name\sid="\d+"\stext=[\w\s]+)\/>/g);

但這給了我空。 我不確定如何獲得最終輸出。

Answer 1

不建議使用正則表達式解析HTML或標簽。 我認為這是一種更好的方法-假設文本以text開頭，其余為用戶名標簽

 const str = `I am <user-name id="3" text="myname lname"/> <user-name id="32" text="name1 name2"/>` let domFragment = document.createElement("div"); domFragment.innerHTML=str; let text = [domFragment.firstChild.wholeText]; [...domFragment.querySelectorAll("user-name")].forEach( ele => text.push(`<strong>${ele.getAttribute("text")}</strong>`) ); console.log(text.join(" ")); 

Answer 2

首先，發出一個溫和的警告……雖然有時您可以放心使用它，但用正則表達式解析HTML通常不是一個好主意。 （有關該主題的文章非常有趣。）

至於您的正則表達式，我注意到的第一件事是，您缺少需要為text屬性值匹配的引號。 查看更多信息后，我將更新此答案...

在這里，與您最初發布的內容略有不同：

let matches = str.match(/\\<user-name\\sid="(\\d+)"\\s+text="([\\w\\s]+)"\\/>/)

我只是添加了缺少的引號，使空格更加靈活，並在括號內將要從字符串中提取的兩部分組合在一起，並取出了外部括號。 哦，我也拿了g標志-不需要。

matches[1]將是id屬性值， matches[2]將是text的值。

matches[2].split(' ')將進一步為您分解該text值。

Answer 3

您可以將字符串解析為HTML並使用DOM操作來獲取值，這是一個示例：

 const content = 'I am <user-name id="3" text="myname lname"/> <user-name id="32" text="name1 name2"/>'; const parser = new DOMParser(); const doc = parser.parseFromString(content, 'text/html'); const getTextAttrVal = (n) => { if (n.matches && n.matches('user-name')) { return `<strong>${n.getAttribute('text')}</strong>`; } return ''; } const recursion = (n) => { if (n && n.childNodes && n.childNodes.length) { return getTextAttrVal(n) + [...n.childNodes].map(recursion).join(''); } return getTextAttrVal(n) || n.textContent; } const result = [...doc.body.childNodes].map(recursion).join(' '); console.log(result);