Question

我试图使用正则表达式来操纵以下字符串

hello.jpg|world.jpg

到

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

任何指针？

Answer 1

split您的输入并将其添加到您的html DOM

＆＃13;

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

＆＃13;

Answer 2

虽然您想使用正则表达式，但您也可以使用split()

split()函数接收要分割字符串的特定字符并将其存储为数组。然后，您可以使用该数组中的每个项目执行以下操作...在此示例中，我将每个项目附加到一个新变量中并将其插入div。

＆＃13;

    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;

＆＃13;

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

＆＃13;

Answer 3

只需匹配管道（|）

以外的所有内容

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

Answer 4

假设您希望输出是HTML字符串而不是实际DOM节点，您可以在RegExp或split之间进行选择：

＆＃13;

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

＆＃13;

请注意，这些示例中没有一个HTML对图像名称进行编码。如果这是一个问题，你就不能使用RegExp方法，但其他两个方法很容易适应。

如果您想创建实际的DOM节点，那么最简单的方法是使用上述方法之一生成字符串，然后只设置innerHTML的{{1}}。如果您想切断中间人并直接进入DOM，您可以尝试这样的事情：

＆＃13;

<ul>

＆＃13;

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

＆＃13;

通过使用<ul id="list"></ul>，已经考虑了HTML编码。

正则表达式将管道分隔的数组替换为html

4 个答案: