如何在html標簽中找到字符串並使用javascript / jquery替換

Question

我不知道如何在html標記中找到一個字符串並將其替換為另一個。 我將在一個示例中展示它。

我有這樣的東西

<a class="test" data-value="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>

我想得到這樣的效果

<a class="test"> <img-src="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>

有人有什么主意嗎？ 我對我的英語水平感到抱歉。

Answer 1

您可以先append img ，然后刪除屬性data-value 。

請參見下面的代碼：

 $("a").append(function(){ return '<img src="'+$(this).attr("data-value")+'">'; }).removeAttr("data-value") 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="test" data-value="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a> 

Answer 2

假設您是JavaScript和/或jQuery新手，我逐步給出了解決方案的示例：

// create a pointer to your anchor
var $yourAnchor = $('.test')

// copy data attribute
var $hdata = $yourAnchor.data('value');

// remove attribute
$yourAnchor.removeAttr('data-value');

// insert html
$yourAnchor.html('<img src="' + $hdata + '">');

Answer 3

 // If It has multiple hyperlink tag then $('a').each(function(){ if($(this).data('value')!=undefined){ $(this).append(function(){ return '<img src="'+$(this).attr("data-value")+'">'; }).removeAttr("data-value"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="test" data-value="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>