正則表達式替換管道分隔陣列的HTML

Question

想使用正則表達式來操縱以下字符串

hello.jpg|world.jpg 

到

<li>http://example.com/hello.jpg</li> 
<li>http://example.com/world.jpg</li> 

任何指針？

Answer 1

假設你所要的輸出是HTML的字符串，而不是實際的DOM節點上，您已經有了一個正則表達式或使用split之間做出選擇：

var str = 'hello.jpg|world.jpg|globe.jpg'; 
 

 
// Using RegExp 
 
var str1 = str.replace(/([^|]+)\|?/g, '<li>http://example.com/$1</li>'); 
 

 
// Using split/map/join with ES6 
 
var str2 = str.split('|').map(img => `<li>http://example.com/${img}</li>`).join(''); 
 

 
// Using split/map/join old school 
 
var str3 = str.split('|').map(function(img) { 
 
    return '<li>http://example.com/' + img + '</li>'; 
 
}).join(''); 
 

 
console.log(str1); 
 
console.log(str2); 
 
console.log(str3);

注這些示例都沒有HTML編碼圖像名稱。如果這是一個問題，你不能使用RegExp方法，但另外兩個可以很容易地進行調整。

如果您想創建實際的DOM節點，那麼使用上述方法之一來生成一個字符串，然後設置您的<ul>的innerHTML可能是最容易的。如果你想繞過了中間商，直接進入到DOM，你可以嘗試這樣的事：

var ul = document.getElementById('list'); 
 

 
var str = 'hello.jpg|world.jpg|globe.jpg'; 
 

 
str.split('|').forEach(function(img) { 
 
    var li = document.createElement('li'); 
 
    
 
    li.innerText = 'http://example.com/' + img; 
 
    
 
    ul.appendChild(li); 
 
});

<ul id="list"></ul>

通過使用innerText的HTML編碼已佔到。

Answer 2

雖然你想使用正則表達式，你也可以使用split()

的split()功能發生在一個特定的字符要分割一個字符串，並將其存儲陣列。然後，您可以使用該數組中的每個項目執行以下操作...在這種情況下，我將每個項目都附加到一個新變量中，並將其插入到div中。

var str = "hello.jpg|world.jpg"; 
 
    var res = str.split("|"); 
 
    var html = "<li>http://example.com/"+res[0]+"</li><li>http://example.com/"+res[1]+"</li>"; 
 
    
 
    document.getElementById("foo").innerHTML = html;

<div id="foo"></div>

Answer 3

split輸入，並把它添加到您的HTML DOM

<ul id="list"> 
 

 
</ul> 
 

 
<script> 
 
    var html = "hello.jpg|world.jpg".split("|"); 
 
    for (var vl in html) { 
 
    
 
    var li = document.createElement("li"); 
 
    
 
    li.innerHTML = "http://example.com/" + html[vl]; 
 
    
 
    document.getElementById("list").appendChild(li); 
 
    
 
    } 
 
</script>

Answer 4

簡單的一切，但管匹配（|）

var myString = 'hello.jpg|world.jpg'; 
var matches = myString.match(/[^|]{1,}/g); 

然後做任何你想要的匹配項目，比如將它們添加到DOM。

var container = document.getElementById('container'); 
for(var i = 0; i < matches.length; i++) { 
    var li = document.createElement('li'); 
    li.innerHTML = matches[i]; 
    container.appendChild(li); 
}