javascript - 解析 TextArea 中的文本并根据路径显示图像

Question

我有一个 HTML5 网页。其中我TextArea有一些原始数据。说这样的话。

Image1:
C:\Images\image1.jpg
Image2:
C:\Images\image2.jpg
Image3:
C:\Images\image3.jpg

我需要解析该文本区域并在文本区域下方的路径中显示图像。我需要将该路径传递给img src="path"标签，并且我应该根据 textarea 中的路径显示图像。任何帮助，将不胜感激！！

Answer 1

使用 jQuery 可以是这样的：

var sText = jQuery('textarea_selector').text(),
    aStrings = sText.split('\n');

for(i = aStrings.length - 1; i>=0; i--) {
    if( aStrings[i].indexOf('\\') != -1 ) {
        jQuery('body').append('<img src="'+aStrings[i]+'">');
    }
}

Answer 2

我整理了一个 JSFiddle ( http://jsfiddle.net/jt5yg/6 ) 来做到这一点。HTML 和 Javascript 相当简单：

<textarea id="rawdata" rows="10" style="width: 100%" onchange="processimages();">
</textarea>
<div id="images"></div>

和

var allfiles = /[a-z]\:\\[\w\\_-]+?\.jpg/gi;
function processimages(){
    var textarea = document.getElementById('rawdata');
    var imagecontainer = document.getElementById('images');
    var file;
    imagecontainer.innerHTML = '';
    while(file = allfiles.exec(textarea.value)){
        imagecontainer.innerHTML += '<img src="file:///'+file+'" />';
    }
}

不幸的是，当我运行脚本时，添加了图像标签，但浏览器拒绝显示它们。安全限制阻止浏览器在没有明确用户操作的情况下访问本地文件系统。

当然，这是有道理的。如果我们能做到这一点，黑客就可以以同样的方式访问您 PC 上隐藏的系统文件的内容。

Answer 3

var srcs = $('textarea').val().replace(/\\/g, "||");
srcs = srcs.split(/Image\d:/).map(function(el) {
   return el.replace("||", "\\");
});

srcs[0] // C:\Images\image1.jpg

您现在可以遍历数组并将 src 应用于每个 Img。