画像遅延読み込みを効率化させるjavascriptについて

前提・実現したいこと

画像の遅延読み込みのための作業を効率化したくてツールを作ろうと思うのですが
テキストエリアの中に
htmlコードを入力しボタンをクリックすると下のテキストエリアの中に
<img>タグを<noscript>で囲った状態で<img>タグの後ろに複製しなおかつ元のimg属性にはclass名lazyの追加とsrc属性をdate-originalに変更するようなプログラムを組みたいのですがいろいろ試してもうまくいきません。
だなたかアドバイスを頂けたら幸いです。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>img</title> </head> <body> <textarea name="sauce" id="sauce" cols="30" rows="10"></textarea> <div id="button">Button</div> <textarea name="scraping" id="scraping" cols="30" rows="10"></textarea> <script src="./jquery.min.js"></script> <script> $(()=>{ $('#button').click(()=>{ let val = $('#sauce').val();

        $('#scraping').val(val);
});

});</script>

</body> </html>

yambejp

2019/12/04 06:49 編集

スクリプトでnoscriptタグを作っても意味がないのでは？（スクリプトが動かないとnoscriptが挿入されず、動いているならnoscriptが無視） > テキストエリアの中にhtmlコードを入力し htmlから画像を生成するのでしょうか？ちょっと何をしたいかわかりません。またやろうとしていることは「遅延読込」ではないと思いますが質問者さんの中の遅延読込の定義をおしえてください

行動規範の内容に同意します

回答1件

ベストアンサー

文字列操作は正規表現を使えばできるでしょう。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

しかしここは DOMParser を挙げておきます。テキストエリアに入力した通りではないかもしれませんが、ノード操作で処理することができます。

JavaScript
1    const parser = new DOMParser();
2    const doc = parser.parseFromString(val, 'text/html');
3    const template = doc.createElement('noscript');
4    for (let i = doc.images.length; i--;) {
5      let img = doc.images[i];
6      let noscript = template.cloneNode(true);
7      noscript.appendChild(img.cloneNode(false));
8      img.parentElement.insertBefore(noscript, img.nextSibling);
9      if (img.hasAttribute('src')) {
10        img.classList.add('lazy');
11        img.setAttribute('data-original', img.getAttribute('src'));
12        img.removeAttribute('src');
13      }
14    }
15
16    console.log(doc.body.innerHTML);