Question

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

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

我需要解析textarea并在textarea下面的路径中显示图像。我需要将该路径传递给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。

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

3 个答案: