CODEWITHSUNDEEP
javascript
Spella
Spella

Reputation: 139

Javascript replace text between brackets with array

I want to replace text inside square brackets with values of an array.

Example :

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

will become like this

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

Please help me.. Thank you

var arr = ['why', 'go', 'from', 'run', 'that', 'nothing', 'from', 'now', 'as']
var i = 0;
$("#text").each(function() {
  $(this).text($(this).text().replace(/\[(.+?)\]/, "["+arr[i]+"]"));
	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>

Upvotes: 1

Views: 1297

Answers (5)

user4280261
user4280261

Reputation:

I tried this: 

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

It does bring the expected result without the brackets though, but when adding brackets: .replace(/\[.+?\]/, "[" + element + "]")); It doesn't work anymore. (Maybe someone could suggest something to edit this)

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386868

Instead of an array, you could use an object with the words to replace. If a word is found, then a corresponding value is used for replacement.

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>

This Version relies on order of the items and replace in the same order.

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>

Upvotes: 1

Rishi
Rishi

Reputation: 419

.each() is not called for every line in a tag. It is called for every element in a class or every element from a tag name. Read more about .each() in the documentation here.

Here is the snippet:

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

Upvotes: 2

RomanPerekhrest
RomanPerekhrest

Reputation: 92904

Use String.prototype.replace() function with replacement callback:

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>

Upvotes: 0

Arnial
Arnial

Reputation: 1441

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

Upvotes: 0

Related Questions