JavaScript替换带数组的括号之间的文本

Question

我想用数组的值替换方括号内的文本。

例子：

<pre id="text"> 
[maybe] i should [leave] 
[to] help you [see] 
[nothing] is [better] [than] this 
[and] this is [everything] we need 
</pre> 

会变成这个样子

<pre id="text"> 
[why] i should [go] 
[from] help you [run] 
[that] is [nothing] [from] this 
[now] this is [as] we need 
</pre> 

请帮助我..谢谢

var arr = ['why', 'go', 'from', 'run', 'that', 'nothing', 'from', 'now', 'as'] 
 
var i = 0; 
 
$("#text").each(function() { 
 
    $(this).text($(this).text().replace(/\[(.+?)\]/, "["+arr[i]+"]")); 
 
\t i++; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<pre id="text"> 
 
[maybe] i should [leave] 
 
[to] help you [see] 
 
[nothing] is [better] [than] this 
 
[and] this is [everything] we need 
 
</pre>

Answer 1

.each()不叫电动标签中的红线。它被称为类中的每个元素或标签名称中的每个元素。在文档here中阅读有关.each()的更多信息。

下面是摘录：

$(document).ready(function() { 
 
    var arr = ['why', 'go', 'from', 'run', 'that', 'nothing', 'from', 'now', 'as'] 
 
    var text = $("#text").text(); 
 
    var count = -1; 
 
    $("#text").text(text.replace(/\[(.*?)\]/g, function() { 
 
    count = count + 1; 
 
    return "["+arr[count]+"]" 
 
    })); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<pre id="text"> 
 
[maybe] i should [leave] 
 
[to] help you [see] 
 
[nothing] is [better] [than] this 
 
[and] this is [everything] we need 
 
</pre>

Answer 2

而不是一个数组，您可以使用带有单词的对象来替换。如果找到一个单词，则使用相应的值进行替换。

var words = { maybe: 'why', leave: 'go', to: 'from', see: 'run', nothing: 'that', better: 'nothing', than: 'from', and: 'now', everything: 'as' }, 
 
    text = document.getElementById('text'); 
 

 
text.innerHTML = text.innerHTML.replace(/\[([^\]\[]+)\]/g, function (_, k) { 
 
    return '[' + words[k] + ']'; 
 
});

<pre id="text"> 
 
[maybe] i should [leave] 
 
[to] help you [see] 
 
[nothing] is [better] [than] this 
 
[and] this is [everything] we need 
 
</pre>

这个版本依赖于项目的顺序，并以相同的顺序替换。

function replacer (array) { 
 
    var i = 0; 
 
    return function() { 
 
     return '[' + array[i++] + ']'; 
 
    }; 
 
} 
 

 
var words = ['why', 'go', 'from', 'run', 'that', 'nothing', 'from', 'now', 'as'], 
 
    text = document.getElementById('text'); 
 

 
text.innerHTML = text.innerHTML.replace(/\[([^\]\[]+)\]/g, replacer(words));

<pre id="text"> 
 
[maybe] i should [leave] 
 
[to] help you [see] 
 
[nothing] is [better] [than] this 
 
[and] this is [everything] we need 
 
</pre>

Answer 3

function change_words(replace_arr, text){ 
    let i = 0; 
    return text.replace(/\[(\w+)\]/g, word => `[${replace_arr[i++] || word}]`); 
} 
const text = "[maybe] i should [leave] [to] help you [see] [nothing] is [better] [than] this [and] this is [everything] we need" 
const arr = ['why', 'go', 'from', 'run', 'that', 'nothing', 'from', 'now', 'as']; 
console.log(change_words(arr, text)) 

Answer 4

使用String.prototype.replace()函数替换回调：

var text = document.getElementById("text"), 
 
    arr = ['why', 'go', 'from', 'run', 'that', 'nothing', 'from', 'now', 'as'], 
 
    count = 0; 
 

 
text.innerHTML = text.innerHTML.replace(/\[([^\]\[]+)\]/g, function (m, m1) { 
 
    return '[' + arr[count++] + ']'; 
 
});

<pre id="text"> 
 
[maybe] i should [leave] 
 
[to] help you [see] 
 
[nothing] is [better] [than] this 
 
[and] this is [everything] we need 
 
</pre>

Answer 5

我尝试这样做：

$(document).ready(function(){ 
     arr.forEach(function(element){ 
     $("#text").text($("#text").text().replace(/\[.+?\]/, element)); 
     }); 
}); 

它不会带来预期的结果，而不括号虽然，但加括号的时候：.replace(/\[.+?\]/, "[" + element + "]"));它不再工作了。 （也许有人可以建议一些东西来编辑这个）