使用AngularJS替换字符串中的html标签属性答案

【问题标题】：Replace html tag attribute in a string using AngularJS使用AngularJS替换字符串中的html标签属性
【发布时间】：2016-06-09 08:59:25
【问题描述】：

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

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>";

我想用<button>标签这样替换每个<iframe>标签：

"<button type="button">Click Me for iframe n°1 !</button>" 用于第一个 iframe

"<button type="button">Click Me for iframe n°2 !</button>" 用于第二个 iframe

等等……

我正在使用 angularJS。我认为解决方案是这样做：

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

但我不知道如何为<iframe> 标签指定这个

有什么建议吗？谢谢！

编辑：

这是一个新的例子，我想做什么：

在 var str 我有 2 个 <iframe> 标签具有不同的 src 属性值：

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

我想访问 src 属性并将其替换为另一个 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;
    }

输出应该是这样的：

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>";

【问题讨论】：

可能是new DOMParser？（虽然我不熟悉使用它，所以我没有给出这个答案。）
尝试 angular.element('iframe');但不确定
@Erez ??那你怎么指定str
你得到 iframe 元素了吗？而你的功能不起作用？
你可以简单地做str.replace对吗？

标签： javascript html angularjs

【解决方案1】：

看到这个fiddle

当您使用字符串生成角度元素时，您可以简单地将字符串本身中的<iframe> 替换为<button>。

例子：

$scope.str='<iframe>some iframe text<span>span content</span><span>more span content</span></iframe>';

$scope.newStr= $scope.str.replace('<iframe>','<button>').
replace('</iframe>','</button>')

【讨论】：

【解决方案2】：

最后，我找到了自己的解决方案：

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

【讨论】：