解析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中的路徑顯示圖像。任何幫助將不勝感激！

來源

2013-04-02 BinaryMee

如果您希望將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上隱藏的系統文件的內容。

來源

2013-04-02 13:28:51

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

來源

2013-04-02 12:42:57 Victor

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

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

現在，您可以迭代這個數組並應用SRC每個圖。

來源

2013-04-02 12:43:48

解析TextArea中的文本並根據路徑顯示圖像

回答

相關問題