Question

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

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

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

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

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

输出：

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

与height和width相同的想法。

有什么建议吗？谢谢！

Answer 1

您应该创建一个临时元素并将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://stackoverflow.com';
console.log(tempEl.childNodes[0].attributes['src'].value);
console.log(tempEl.innerHTML);

Answer 2

您使用浏览器解析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"));

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

2 个答案: