如何使用javascript或angularjs从html标签中提取/编辑属性？

Unless I did a mistake, I didn't find a clean/simple answer to my problem.

除非我犯了错误，否则我找不到一个干净/简单的答案来解决我的问题。

I have a tags in a string and containing a src attribute :

我有一个字符串中的标签，并包含一个src属性：

var str = "<iframe src="https://www.google.com/" height="800" width="500"></iframe>"

Using JS or AngularJS (ONLY !) I want to extract somehow an attribute, for example src :

使用JS或AngularJS（仅限！）我想以某种方式提取一个属性，例如src：

str.dosmthg("src","http://*.com/");

Output :

输出：

"<iframe src="http://*.com/" height="800" width="500"></iframe>"

Same idea with height and width.

高度和宽度相同。

Any suggestions ? Thanks !

有什么建议么？谢谢！

2 个解决方案

#1

You should create a temp element and put your HTML into its innerHTML. Then you will be able to manipulate child nodes attributes.

您应该创建一个临时元素并将HTML放入其innerHTML中。然后，您将能够操纵子节点属性。

var tempEl = document.createElement('div');
tempEl.innerHTML = '<iframe src="https://www.google.com/" height="800" width="500"></iframe>';
console.log(tempEl.childNodes[0].attributes['src'].value);
tempEl.childNodes[0].attributes['src'].value = 'http://*.com';
console.log(tempEl.childNodes[0].attributes['src'].value);
console.log(tempEl.innerHTML);

#2

You use the browser to parse the HTML, then read the attribute values from the resulting DOM element; see comments:

您使用浏览器解析HTML，然后从生成的DOM元素中读取属性值;看评论：

// Your string
var str = '<iframe src="https://www.google.com/" height="800" width="500"></iframe>';

// Create an appropriate parent element for the string; note we don't
// actually attach this to the DOM anywhere
var body = document.createElement('body');

// Use the element to parse the HTML
body.innerHTML = str;

// Get the iframe from the element
var iframe = body.querySelector("iframe");

// Get the attributes from the element
console.log("src = ", iframe.getAttribute("src"));
console.log("height = ", iframe.getAttribute("height"));
console.log("width = ", iframe.getAttribute("width"));

#1