Javascript 解析文本区域中的文本并基于路径显示图像

我有一个HTML5网页。 其中我有一个

TextArea

和一些原始数据。 说这样的话

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

我需要解析该文本区域，并在文本区域下方的路径中显示图像。 我需要将该路径传递给

img src=“path”

标记，并根据textarea中的路径显示图像。

---

任何帮助都将不胜感激

使用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 sText=jQuery（'textarea\u选择器'）。text（），
aStrings=sText.split（'\n'）；
对于（i=aStrings.length-1；i>=0；i--）{
if（aStrings[i].indexOf（'\\'）！=-1）{
jQuery（'body'）。append（''）；
}
}

现在，您可以迭代数组并将src应用于每个Img。

为此，我编写了一个JSFiddle（）。HTML和Javascript相当简单：

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

及

var allfiles=/[a-z]\：\\[\w\\\\\\\\-]+？\.jpg/gi；
函数processimages（）{
var textarea=document.getElementById（'rawdata'）；
var imagecontainer=document.getElementById（'images'）；
var文件；
imagecontainer.innerHTML=''；
while（file=allfiles.exec（textarea.value））{
imagecontainer.innerHTML+=''；
}
}

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

---

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

如果你想有一个纯HTML无法解决的JS解决方案，请在你的问题中添加JavaScript标记。这些图像将出现在客户端的计算机上，或者在互联网上的某个地方？@GarethCornish:来自客户端的计算机。！！您必须使用输入元素让用户选择文件，然后使用文件API获取图像数据并使用该数据创建新的图像元素。我猜无法从提供的图像中获取文件路径。提取文件名的脚本并不太难，但浏览器拒绝显示图像。安全限制阻止访问本地文件系统。

<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+'" />';
    }
}