正则表达式替换管道分隔阵列的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); 
}