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 + "]"));它不再工作了。 （也許有人可以建議一些東西來編輯這個）