在我的專案中，我們使用 RegExp 來顯示我們從牌組收到的卡片的標題。最近我發現從套牌方面我們有時會收到不同的格式并且標題沒有顯示。
所以，在它總是這樣的字串之前：
const res =
`<p class="cardTitle" style="font-size: 27.2px">
<span>Some text here</span><span> - Title</span>
</p>`;
正則運算式是：
/<p class="cardTitle"[^>]*>[\s]*<span[^>]*>(. )<\/span><span[^>]*>(. )<\/span><div[^>]*>(. )<\/div> [\s]*<\/p>/i.exec(res);
現在有時我們會在里面收到reswithdiv和<br>標簽
const res =
`<p class="cardTitle" style="font-size: 27.2px">
<span>Some text here</span><span> - Title</span>
<div style="font-size: 10px">Title:<br>Some text here</div>
</p>`;
問題是，如何改變正則運算式來忽略這個<div>..<br>.</div>？
這是一個演示：
const res =
`<p style="font-size: 27.2px">
<span>Some text here</span><span> - Title</span>
</p>`;
const newRes =
`<p style="font-size: 27.2px">
<span>Some text here</span><span> - Title</span>
<div style="font-size: 10px">Title:<br>Some text here</div>
</p>`;
const regEx = /<p [^>]*>[\s]*<span[^>]*>(. )<\/span><span[^>]*>(. )<\/span> [\s]*<\/p>/i;
const correct = regEx.exec(res);
const broken = regEx.exec(newRes);
console.log('correct', correct);
console.log('broken', broken);非常感謝您的幫助！
uj5u.com熱心網友回復：
簡化正則運算式
/<p class="cardTitle"[^>]*>\s*<span[^>]*>(.*?)<\/span><span[^>]*>(.*?)<\/span>.*?<\/p>/si
這將獲得p標簽，帶有 2 個跨度和它包含的任何其他內容。
const res =
`<p style="font-size: 27.2px">
<span>Some text here</span><span> - Title</span>
</p>`;
const newRes =
`<p style="font-size: 27.2px">
<span>Some text here</span><span> - Title</span>
<div style="font-size: 10px">Title:<br>Some text here</div>
</p>`;
const regEx = /<p [^>]*>\s*<span[^>]*>(.*?)<\/span><span[^>]*>(.*?)<\/span>.*?<\/p>/si;
const correct = regEx.exec(res);
const broken = regEx.exec(newRes);
console.log('correct', correct);
console.log('broken', broken);uj5u.com熱心網友回復：
將 htmlString 決議為 DOM，然后提取文本。
const res =
`<p style="font-size: 27.2px">
<span>Some text here</span><span> - Title</span>
<div style="font-size: 10px">Title:<br>Some text here</div>
</p>`;
const getNodes = str => {
document.body.insertAdjacentHTML('beforeEnd', str);
const DOM = document.querySelector('.cardTitle');
return DOM.innerText;
};
console.log(getNodes(res));轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/427083.html
標籤：javascript html 正则表达式
上一篇：如何排除以短語開頭的模式，但該模式可能包含該短語的子字串？
下一篇：正則運算式從多到少找到重復的句子