我尝试创建一个 greaseMonkey 脚本来检查页面中是否有标记为 <a> 的 mp3。标记，并将它们替换为 <audio>来自 html5 的标签。但我无法理解如何做到这一点。有人可以指出我在这里出错的地方吗？谢谢。
<html><body>
<!-- tags, might ir might not have ids -->
<a id="myid" href="mp3/basic.phrases.1.mp3">Some mp3 file1.mp3</a><br />
<a href="mp3/basic.phrases.2.mp3">Some mp3 file2.mp3</a><br />
<script language="JavaScript">
var findAtags = document.getElementsByTagName('a');
for( var i = 0; i < findAtags.length; i++) {
var audioTag = document.createElement("audio");
var ext = findAtags[i].getAttribute("href").split('.').pop();
if(ext == "mp3") {
document.write(findAtags[i] + '[' + i + '] == ' + ext + '<br>' );
document.body.replaceChild(audioTag, findAtags[0]);
// I would need to replace the <a href="..." ></a> with '<audio> <source src="' + findAtags[i] + '" type="audio/mp3" /> </audio>';
};
}
</script>
</body></html>
最佳答案
既不使用任何框架又不乱丢全局范围的最简单方法。
注意 - 如果您将从最后一个到第一个 anchor 进行迭代，那么您将能够在每个 anchor 之前插入一个元素并在同一个循环中删除。
( function( a ) {
for( var i = a.length; i--; ) {
var e = a[i],
audio = document.createElement( 'audio' ),
p = e.parentNode;
audio.src = e.href;
p.insertBefore( audio, e );
p.removeChild( e );
}
} ) ( document.getElementsByTagName( 'a' ) );
关于javascript - 当文件类型匹配时，将 <a> 标签替换为 <audio tags>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8620801/