我有一个包含 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>";
我想替换每个 <iframe>
用 <button>
标记以这种方式标记:
"<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>";
最佳答案
查看此 fiddle
当你使用字符串生成 Angular 元素时,你可以简单地替换 <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>')
关于javascript - 使用 AngularJS 替换字符串中的 html 标签属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37721326/