<a>使用javascript從文本中的標簽</a>獲取文本

Question

我正在從 API 獲取 html 內容。

示例消息可能如下所示

Lorem ipsum dolor sit amet <a href="https://example.com">example.com</a>
Pellentesque porta ligula et justo condimentum, nec tincidunt libero tempor.
Pellentesque nunc justo, tincidunt sit amet suscipit sit amet, auctor <a href="https://google.com">google.com</a>

我需要我的消息看下面的行，純文本

Lorem ipsum dolor sit amet example.com
Pellentesque porta ligula et justo condimentum, nec tincidunt libero tempor.
Pellentesque nunc justo, tincidunt sit amet suscipit sit amet, auctor google.com

我嘗試將正則表達式與組一起使用，下面的 js 代碼

const r = /^<a href.*>(.*?)<\/a>$/gm

let link = `<a href="https://google.com" target="_blank">google.com</a> test <a href="test.com">test.com</a>`

let result

while((result = r.exec(link)) !== null) {
  const match = result[1];
  link = link.replace(r, match)
}

console.log(link)

我也嘗試了如下簡單的代碼

const r = /^<a href.*>(.*?)<\/a>$/gm

let link = `<a href="https://google.com" target="_blank">google.com</a> test <a href="test.com">test.com</a>`

link = link.replaceAll(r, "$1")

console.log(link)

不幸的是，在這兩種情況下，運行我的代碼 console.log 都會打印“test.com”，而不是整個消息。

有沒有更好的解決方案？

Answer 1

您不需要使用正則表達式來執行此操作。 您可以使用 DOM 刪除鏈接和任何其他 HTML 標記。

 const htmlString = `Lorem ipsum dolor sit amet <a href="https://example.com">example.com</a> Pellentesque porta ligula et justo condimentum, nec tincidunt libero tempor. Pellentesque nunc justo, tincidunt sit amet suscipit sit amet, auctor <a href="https://google.com">google.com</a>` const parser = new DOMParser(); const doc = parser.parseFromString(htmlString, "text/html"); const text = doc.body.textContent; console.log(text);

如果您只想刪除鏈接並保留其他 HTML 標記，這也是可能的。

 const htmlString = `Lorem ipsum dolor sit amet <a href="https://example.com">example.com</a> Pellentesque <b>porta</b> ligula <em>et justo</em> condimentum, nec tincidunt libero tempor. Pellentesque nunc justo, tincidunt sit amet suscipit sit amet, auctor <a href="https://google.com">google.com</a>` const parser = new DOMParser(); const doc = parser.parseFromString(htmlString, "text/html"); const anchors = doc.body.querySelectorAll("a"); anchors.forEach(node => node.replaceWith(...node.childNodes)); const htmlWithAnchorsRemoved = doc.body.innerHTML; console.log(htmlWithAnchorsRemoved);

Answer 2

從文本中刪除所有錨標記的模式如下所示：

<a.*?</a>

帶有全局標簽。

它將專門搜索您的字符串中的所有錨標記，並將其全局匹配（即在您使用的所有文本中）。 您可以將此正則表達式與 replaceAll 函數一起使用，如下所示：

let value = string.replaceAll("<a[^>]*>(.*?)</a>", "");

你可以在這里測試正則表達式

我已經測試了給定的字符串，輸出如下：

希望這可以幫助。 如果您有任何疑問，請告訴我。

問候

Answer 3

使用正則表達式來解析 html 從來都不是一條好路。 也許以下內容會對您有所幫助？

 const html=`Lorem ipsum dolor sit amet <a href="https://example.com">example.com</a> Pellentesque porta ligula et justo condimentum, nec tincidunt libero tempor. Pellentesque nunc justo, tincidunt sit amet suscipit sit amet, auctor <a href="https://google.com">google.com</a>`; function html2text(html){ const o=document.createElement("div"); o.innerHTML=html; return o.textContent; } console.log(html2text(html));

Answer 4

謝謝所有答案。 @bobble-bubble 評論的解決方案對我有用

下面的代碼片段

 const replaceHTML = (text) => { const rLink = /<\/?a\b[^><]*>/gi text = text.replace(rLink, "") return text } console.log(replaceHTML(`<a href="google.com" target="_blank">google.com</a>`))

Answer 5

temp = document.createElement('template');
temp.innerHTML = text;
temp.content.querySelectorAll('a').forEach(e=>{e.replaceWith(e.href)});
console.log(temp.innerHTML);