将超链接和类添加到字符串中的每个图像

Posted 2023-03-22

【中文标题】将超链接和类添加到字符串中的每个图像

【英文标题】：Add Hyperlink and Class to every image within a string

【发布时间】：2020-05-26 06:54:38

【问题描述】：

我使用 Summernote 发布博客，但使用代码 sn-p 将图像直接上传到服务器而不是文本本身，代码如下所示：

<script>$(document).ready(function() 
$("#summernote").summernote(
         callbacks: 
        onImageUpload : function(files, editor, welEditable) 

             for(var i = files.length - 1; i >= 0; i--) 
                     sendFile(files[i], this);
            
        
    
    );
);
function sendFile(file, el) 
var form_data = new FormData();
form_data.append('file', file);
$.ajax(
    data: form_data,
    type: "POST",
    url: 'editor-upload.php',
    cache: false,
    contentType: false,
    processData: false,
    success: function(url) 
        $(el).summernote('editor.insertImage', url);
    
);

</script>

<?php
if(empty($_FILES['file']))

    exit();

$errorImgFile = "./img/img_upload_error.jpg";
$temp = explode(".", $_FILES["file"]["name"]);
$newfilename = round(microtime(true)) . '.' . end($temp);
$destinationFilePath = './img-uploads/'.$newfilename ;
if(!move_uploaded_file($_FILES['file']['tmp_name'], $destinationFilePath))
    echo $errorImgFile;

else
    echo $destinationFilePath;


?>

我现在正在尝试将 Lightbox 包含到嵌入式图像中，但无法找到一种方法来单独更改 img 标签来执行此操作？举个例子；

$string = '<img src="firstimg.jpg"> a little bit of text <img src="secondimg.jpg">';

我需要将其转换为类似于

<a class="example-image-link" href="firstimg.jpg" data-lightbox="example-set"><img class="example-image" src="firstimg.jpg"></a> a little bit of text <a class="example-image-link" href="secondimg.jpg" data-lightbox="example-set"><img class="example-image" src="secondimg.jpg"></a>

我四处寻找，但没有找到任何帮助？任何帮助，将不胜感激！

【参考方案1】：

let $string = `<img src="firstimg.jpg"> a little bit of text <img src="secondimg.jpg" >`
let parser = new DOMParser()
let _document = parser.parseFromString($string, "text/html")
let ele = _document.getElementsByTagName("IMG")
for(let i = 0; i < ele.length; i++) 
let wrapper = _document.createElement('a'); 
wrapper.classList = ["example-image-link"]
wrapper.href = ele[i].src
wrapper.setAttribute('data-lightbox', 'Hello World!');
let myImg =  ele[i]
wrapper.appendChild(myImg.cloneNode(true)); 
myImg.parentNode.replaceChild(wrapper, myImg);


let newStr = `$_document.getElementsByTagName("BODY")[0].innerHTML`
console.log(newStr)

你可以试试上面的逻辑

【讨论】：

虽然这似乎可行，但我不熟悉这种类型的代码，似乎无法让它在我的网站中运行？你能把它添加到像 w3schools 这样的地方，这样我就可以看到它是如何添加的？ w3schools.com/code/tryit.asp?filename=GBYUNFNNXY25

你可以看看这个sn-p out jsFiddle