使用AngularJS替换字符串中的html标签属性 [英] Replace html tag attribute in a string using AngularJS

问题描述

我有一个包含html标签的字符串:

  var str =< div< p></p> p< i" blabla</i>/p< p> p< i><; b" blaaaaaablaaaaa</b</i>/p< iframe src ='urlAAA'height ='400'width ='800'</iframe< p></p> p"你好blabla</sub>/p< p> br</p> iframe src ='urlBBB'height ='400'width ='800'</iframe</div>； 

我想用以下方式将每个< iframe> 标记替换为< button> 标记:

< button type =" button>为第一个iframe单击我"的iframe 1！</button>"

< button type =" button>单击我以获取iframe n°2！</button>" 以获得第二个iframe

等...

我正在使用angularJS.我认为解决方案是执行以下操作:

  var ele = angular.element(str);ele.replaceWith(function(index){返回< button type ='button'>为Meframe n°单击我" +索引+！</button>";}); 

但是我不知道如何为< iframe> 标签

指定

有什么建议吗?谢谢！

---

这是我想做的一个新例子:

在 var str 中，我有2个< iframe> 标记，它们具有不同的 src 属性值:

第一个iframe具有 src ='urlAAA'第二个 src ='urlBBB'

我想访问src属性并将其替换为另一个URL.

 函数editFrameAttributes(str){var array = [];var eles = angular.element(str).find('iframe');[] .forEach.call(eles，function(ctl){array.push(ctl.outerHTML)});Object.keys(array).forEach(function(key){var tempEl = document.createElement('div');tempEl.innerHTML = array [key];tempEl.childNodes [0] .attributes ['src'].value ="www.something.com";tempEl.childNodes [0] .attributes ['width'].value ='1234';array [key] = tempEl.innerHTML;});//然后，我不知道如何在"str"中用新的iframe替换旧的iframe返回newStr;} 

输出应如下所示:

  var str =< div< p></p> p< i" blabla</i>/p< p> p< i><; b" blaaaaaablaaaaa</b</i>/p< div>< iframe src ='www.something.com'height ='400'width ='1234'></iframe>;</div< p>/p> p< sub" hello blabla</sub>/p< p> br</p< div>;< iframe src ='www.something.com'height ='400'width ='1234'></iframe</div<//div"; 

解决方案

最后，这是我发现的解决方案:

 函数editFrameAttributes(str，newSrc){var eles = angular.element(< div"" + str +</div"");eles.find('[src]').each(function(){this.src = newSrc;});返回eles.html();} 

I have a string containing html tags :

var str =  "<div><p></p><p><i>blabla</i></p><p><i><b>blaaaaaablaaaaa</b></i></p><iframe src='urlAAA' height='400' width='800'></iframe><p></p><p><sub>hello blabla</sub></p><p><br></p><iframe src='urlBBB' height='400' width='800'></iframe></div>"; 

I want to replace each <iframe> tag with <button> tag in this way:

"<button type="button">Click Me for iframe n°1 !</button>" for first iframe

"<button type="button">Click Me for iframe n°2 !</button>" for second iframe

etc....

I'm using angularJS. I think the solution is to do something like this :

var ele = angular.element(str);
ele.replaceWith(function(index){
        return "<button type='button'>Click Me for iframe n°" + index + " !</button>";
});

But I don't know how to specify this for <iframe> tags

Any suggestion ? Thanks !

---

EDIT :

Here a new example, what I want to do :

In var str I have 2 <iframe> tags with different src attribute value :

the first iframe has src='urlAAA' the second src='urlBBB'

I want to get access to the src attribute and replace it with an another url.

function editFrameAttributes(str){
      var array =[];
      var eles= angular.element(str).find('iframe');
      [].forEach.call(eles, function (ctl) {
        array.push(ctl.outerHTML)
      });
      Object.keys(array).forEach(function (key) {
        var tempEl = document.createElement('div');
        tempEl.innerHTML = array[key];

        tempEl.childNodes[0].attributes['src'].value = "www.something.com";
        tempEl.childNodes[0].attributes['width'].value = '1234';

        array[key] = tempEl.innerHTML;
      });
      //then I don't know how to replace old iframes by new iframes in 'str' 

      return newStr;
    }

The output should look like this :

var str =  "<div><p></p><p><i>blabla</i></p><p><i><b>blaaaaaablaaaaa</b></i></p><div><iframe src='www.something.com' height='400' width='1234'></iframe></div><p></p><p><sub>hello blabla</sub></p><p><br></p><div><iframe src='www.something.com' height='400' width='1234'></iframe></div></div>"; 

解决方案

Finally, here the solution I found myself :

function editFrameAttributes(str,newSrc){
      var eles = angular.element("<div>"+str+"</div>");
      eles.find('[src]').each(function() {
        this.src = newSrc;
      });
      return eles.html();
    }

这篇关于使用AngularJS替换字符串中的html标签属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！