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

问题描述：

我有一个HTML5网页。其中我有一个TextArea与一些原始数据。说这样的话。解析TextArea中的文本并根据路径显示图像

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

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

如果您希望将JS解决方案作为纯HTML使用，那么请在您的问题中添加JavaScript标记 –

图像是放在客户端的计算机上，还是放在互联网上的某个地方？ –

@GarethCornish：来自客户端电脑。 – BinaryMee

答

我放在一起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上隐藏的系统文件的内容。

答

使用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]+'">'); 
    } 
}

答

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

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

现在，您可以迭代这个数组并应用SRC每个图。

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

相关推荐