Javascript，只为锚标记的href值准备一些内容

Javascript to prepend something to href value of anchor tags only

本文关键字：href Javascript      更新时间：2023-09-26

要求

我们在UI中有一个文本区域，用户可以在其中输入这样的值-

<link attr="foo" attr2="bar" href='http://blah.com/style.css' rel='stylesheet' />
<a target="something" attr2 ="foobar" href="http://blah.com/test"></a>

我们希望使用javascript逻辑将｛clickurl｝仅预置到锚标记的href属性*。

目前我们有以下正则表达式-

return bannerHtml.replace(/(href's*='s*['"'])'s*/ig,"$1{clickurl}");

这做了必要的更改，但它对任何包含href属性的标记都做了更改，即不仅对锚定标记，而且对链接标记等其他标记也做了更改。因此，上面显示的样本输入变为-

<link attr="foo" attr2="bar" href='{clickurl}http://blah.com/style.css' rel='stylesheet' />
<a target="something" attr2 ="foobar" href="{clickurl}http://blah.com/test"></a>

观察到链接标签也发生了变化。

那么，我该如何修改逻辑以使-

  • 更改仅发生在锚定标记上
  • 它考虑了href属性之前存在任意数量属性的可能性。（在示例输入中，href属性之前有许多属性，如attr="foo"等。）

regex在这里可取吗？

我检查了一些问题，比如用链接替换URL的Javascript Regex，但没有在嵌入（或img）标签

中检查

为什么不使用这样的东西：

(<a.*?href's*='s*['"'])'s*

这将只替换a标记href。

return bannerHtml.replace(/(<a.*?href's*='s*['"'])'s*/ig,"$1{clickurl}");

此处演示：http://regex101.com/r/eM7zU9

IMHO最好只使用getElementsByTagNames('a')并替换attr href（因为您想为所有锚点执行此操作）

要仅在<a标记中替换url，同时确保我们刚好在<link标记之后，我建议使用以下简单替换：

return bannerHtml.replace(/(<link attr[^>]+>[^<]+<a[^>]+?href=")/img, "$1{clickurl}");
相关文章：