用<a><span>字符串中的標簽替換所有內容：Javascript</span></a>

Question

我需要用字符串中的<span>標記替換所有<a> 。

代碼：

var a = input.replace(/<a>/g, "'<span>");
var b = a.replace(/<\/a>/g, "</span>");
var c = b.replace(/href/g, "title");

但這對我不起作用，我也無法添加樣式

輸入： Angular 是一個用於構建移動和桌面 web 應用程序的平台。
<a href="http://www.google.com">Test Link</a>在今天的 Web 平台上實現最高速度，並通過 Web Worker 和服務器端渲染更進一步。
<a href="http://www.google.com">Test Link Two</a>

Output： Angular 是一個用於構建移動和桌面 web 應用程序的平台。
<span style="color:#0000EE" title="http://www.google.com">Test Link</span>今天在 Web 平台上實現最大速度，並通過 Web Workers 和服務器端渲染。
<span style="color:#0000EE" title="http://www.google.com">Test Link Two</span> .

誰能幫我解決這個問題。

Answer 1

正如我在上面的評論中提到的，正則表達式不是解決（即解析、修改......）HTML 的正確工具。 這是一個示例，演示了一種使用DOMParser()實際用新創建的跨度替換鏈接標簽的方法。

 var inputString = `Angular is a platform for building mobile and desktop web applications. <a href="http://www.google.com">Test Link</a> Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering. <a href="http://www.google.com">Test Link Two</a>`; var domParser = new DOMParser(); var doc = domParser.parseFromString(inputString, 'text/html'); var links = doc.querySelectorAll('a:link'); links.forEach(function(linkTag) { var spanTag = document.createElement('span'); spanTag.title = linkTag.href; spanTag.style.color = '#0000EE'; spanTag.innerHTML = linkTag.innerHTML; linkTag.parentNode.replaceChild(spanTag, linkTag); }); console.log(doc.body.innerHTML);

Answer 2

使用這個片段

String.prototype.replaceAll = function(search, replacement) {
  var target = this;
  return target.replace(new RegExp(search, 'g'), replacement);
 };

調用 yourstring.replaceAll('a tag', 'span tag') 或者你想使用它。

Answer 3

您可以添加 replaceAll 作為原型

String.prototype.replaceAll = function (find, replace) {
   var str = this;
   return str.replace(new RegExp(find.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g'), replace);
};

然后你可以使用

let a = input.replaceAll('a','span');