Regex zu ersetzen Rohr begrenzt Array HTML

Question

Am versuchen regex verwenden Sie die folgende Zeichenfolge

hello.jpg|world.jpg 

zu

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

Alle Hinweise zu manipulieren?

Answer 1

Angenommen, Sie möchten die Ausgabe eine Reihe von HTML zu sein, anstatt tatsächliche DOM-Knoten Sie die Wahl zwischen einem RegExp oder mit split haben:

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);

Hinweis dass keines dieser Beispiele HTML den Bildnamen codiert. Wenn das ein Problem ist, können Sie den RegExp-Ansatz nicht verwenden, aber die anderen beiden könnten leicht angepasst werden.

Wenn Sie die tatsächlichen DOM-Knoten erstellen wollten, dann ist es am einfachsten, einen der obigen Ansätze zu verwenden, um eine Zeichenfolge zu generieren, und dann einfach innerHTML von <ul>. Wenn Sie den Mittels auszuschneiden und gehen Sie direkt zum DOM wollte könnten Sie so etwas wie dies versuchen:

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>

Durch die Verwendung von innerText die HTML-Codierung für wurde berücksichtigt.

Answer 2

Während Sie regex verwenden wollten, können Sie auch split()

Die split() Funktion nimmt in einem bestimmten Zeichen verwenden Sie einen String durch und speichert sie als Array aufzuteilen. Sie können dann jedes Element in diesem Array verwenden, um was auch immer mit ... zu tun. In diesem Fall habe ich jedes in eine neue Variable angehängt und es in eine div eingefügt.

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 Ihre Eingabe und fügen Sie ihn in Ihre 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

einfach das alles passen, aber das Rohr (|)

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

Dann tun Sie, was Sie wollen, mit den passenden Elementen, wie sie zum DOM hinzufügen.

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); 
}