javascriptを介してタグにwidth属性とheight属性を追加しようとしています。 img srcはウェブ(http://www....)からのものです。私は高さと幅を追加するjavascript.replaceを使用しています。ここに私のコードです。 (現在は幅のためだけです)。String.replaceのタイムアウト
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(window).load(function() {
var htmlString = '<div class="sample"> <img src="https://kbob.github.io/images/sample-5.jpg"> </div><div class="sample_another"><img src="http://www.crazymonkeydefense.com/wp-content/uploads/2012/02/sample-img3.png"> </div> ';
function dostuff(img, imgString) {
img.onload = function() {
imgString = imgString.replace("<img ", '<img width="' + this.width + 'px" ');
console.log("modified = " + imgString);
};
}
var modifyImg = function(imgString) {
console.log("original = " + imgString)
if (imgString.indexOf('width="') == -1) {
var newImgString = (imgString.substring(imgString.lastIndexOf('src="'), imgString.lastIndexOf('"'))).replace('src="', '');
var img = new Image();
img.src = newImgString;
dostuff(img, imgString);
}
return imgString;
}
modifiedHtmlString = htmlString.replace(/<img[^>]+>/g, modifyImg);
console.log(modifiedHtmlString);
});
</script>
</body>
</html>
これに伴う問題はhtmlString.replace(/] +>/gで、modifyImg)これは瞬時に実行し、returnステートメントからそれを得ることはなく、その後、未定義であることがModifyImg値を設定することです。
このソリューションにはどのようにアプローチしますか。
'onload'ハンドラ、またはそれ等の内部で呼び出さ任意の関数Aタイムアウトが正しい解決方法ではありません**の内側に、あなたは**置き換えを行う必要があります。 – adeneo
...正規表現の代わりに.setAttribute()を使わないのはなぜですか? – baao
@adeneoこれにアプローチする方法を教えていただけますか? Btwロード時にこの関数を実行したいのですか? – Pujan