首頁猿問 Javascript，如何正確找到...

Javascript，如何正確找到文本中的模式并替換？

JavaScript

一只甜甜圈 2022-01-07 19:03:06

在以下 html 文本中：Here are some users you mentioned: @johnsmith1, @daisy_apple23, @bob.erricson. //... some more text //我如何找到所有的@{user}并將它們轉換為<a></a>帶有添加類的標簽，保持它們各自的位置而不刪除任何其他文本？所以@johnsmith1應該簡單地轉換為<a class="mention-inserted active-link">@johnsmith1</a>＆很快。這比我相信的更復雜嗎？還是我公然錯過了正則表達式的簡單使用？

查看完整描述

2 回答

翻翻過去那場雪

TA貢獻2065條經驗獲得超14個贊

與其嘗試為非常規語言提出正則表達式，不如使用querySelectorAll().這將允許您選擇所有具有 class 的 span 元素mention-inserted。然后，您可以使用循環訪問此集合，.forEach并使用將span元素更改為鏈接.outerHTML。

請參見下面的示例：

document.querySelectorAll('span.mention-inserted').forEach(elem => {

elem.outerHTML = `<a class="${elem.classList.value} active-link">${elem.innerHTML}</a>`;

});

.active-link {

color: blue;

cursor: pointer;

}

Here are some users you mentioned:

@johnsmith1,

@daisy_apple23,

@bob.erricson

如果您的文本是 JS 中的字符串（而不是 HTML），您可以使用 aDOMParser代替，這將允許您使用上述方法：

const str = `Here are some users you mentioned: @johnsmith1,@daisy_apple23,@bob.erricson`;

const parsed = new DOMParser().parseFromString(str, "text/html").body;

parsed.querySelectorAll('span.mention-inserted').forEach(elem => {

elem.outerHTML = `<a class="${elem.classList.value} active-link">${elem.innerHTML}</a>`;

});

const result = parsed.innerHTML; // String output/result

document.body.appendChild(parsed); // HTMLHtmlElement object output

console.log(result);

.active-link {

color: blue;

cursor: pointer;

}

反對回復 2022-01-07

江戶川亂折騰

TA貢獻1851條經驗獲得超5個贊

我嘗試使用正則表達式來突出顯示 html textNode 而不是更改 html 結構，但這很復雜。所以我使用 DOM API 來實現它。

function replaceSpanWithAnchor(htmlText) {

const node = document.createElement('div')

node.innerHTML = htmlText

const spans = node.querySelectorAll('span')

for (let span of spans) {

let a = document.createElement('a')

a.className = "mention-inserted active-link"

a.textContent = span.textContent

span.replaceWith(a)

}

return node.innerHTML

}

console.log(replaceSpanWithAnchor('Here are some users you mentioned: @johnsmith1,@daisy_apple23,@bob.erricson.'))

// Here are some users you mentioned: <a class="mention-inserted active-link">@johnsmith1</a>,<a class="mention-inserted active-link">@daisy_apple23</a>,<a class="mention-inserted active-link">@bob.erricson</a>.

反對回復 2022-01-07

2 回答
0 關注
182 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Javascript，如何正確找到文本中的模式并替換？

Javascript，如何正確找到文本中的模式并替換？

2 回答

添加回答

Javascript，如何正確找到文本中的模式并替換？

Javascript，如何正確找到文本中的模式并替換？