Using JavaScript, swap out the text enclosed in square brackets with an array

Question

Using JavaScript, swap out the text enclosed in square brackets with an array

Changing the text inside square brackets with values from an array is my goal.

For instance:

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

The transformed version will look 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>

I would appreciate your assistance. 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>

javascript

Answer 1

Answer №1

.each() isn't executed for each line within a tag; rather, it is triggered for every element with a specific class or for each element with a certain tag name. To learn more about .each(), check out the documentation here.

Take a look at this code 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>

Answer 2

.each() isn't executed for each line within a tag; rather, it is triggered for every element with a specific class or for each element with a certain tag name. To learn more about .each(), check out the documentation here.

Take a look at this code 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>

Answer 3

Answer №2

Using an object with words for replacement instead of an array can be a more organized approach. When a word is detected, the corresponding value from the object can be used for substitution.

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 method relies on the order of the items for replacement, ensuring they are replaced in the same sequence.

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 4

Using an object with words for replacement instead of an array can be a more organized approach. When a word is detected, the corresponding value from the object can be used for substitution.

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 method relies on the order of the items for replacement, ensuring they are replaced in the same sequence.

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 5

Answer №3

function swap_terms(replace_array, sentence){
   let index = 0;
   return sentence.replace( /\[(\w+)\]/g, word => `[${replace_array[index++] || word}]` );
}
const sentence = "[perhaps] i might [depart] [to] assist you [perceive] [nothing] is [superior] [than] this [and] this is [all] we require"
const array_replace = ['because', 'leave', 'from', 'run', 'that', 'nothing', 'better', 'now', 'as'];
console.log( swap_terms( array_replace, sentence ) )

Answer 6

function swap_terms(replace_array, sentence){
   let index = 0;
   return sentence.replace( /\[(\w+)\]/g, word => `[${replace_array[index++] || word}]` );
}
const sentence = "[perhaps] i might [depart] [to] assist you [perceive] [nothing] is [superior] [than] this [and] this is [all] we require"
const array_replace = ['because', 'leave', 'from', 'run', 'that', 'nothing', 'better', 'now', 'as'];
console.log( swap_terms( array_replace, sentence ) )

Answer 7

Answer №4

To update the content, utilize the String.prototype.replace() method along with a callback for replacement:

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

text.innerHTML = text.innerHTML.replace(/\[([^\]\[]+)\]/g, function (match, group) {
    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 8

To update the content, utilize the String.prototype.replace() method along with a callback for replacement:

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

text.innerHTML = text.innerHTML.replace(/\[([^\]\[]+)\]/g, function (match, group) {
    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 9

Answer №5

Attempting a solution:

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

The code successfully produces the desired output without brackets; however, when adding brackets like this:

.replace(/\[.+?\]/, "[" + element + "]"));

, it stops working. (Any suggestions on how to modify this are welcome)

Answer 10

Attempting a solution:

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

The code successfully produces the desired output without brackets; however, when adding brackets like this:

.replace(/\[.+?\]/, "[" + element + "]"));

, it stops working. (Any suggestions on how to modify this are welcome)

Using JavaScript, swap out the text enclosed in square brackets with an array

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Styling a table based on specific conditions using Angular and JavaScript

The WebSocket function is returning undefined even though it successfully fetches the user; however, the user is

Vanishing Tooltip following an implementation of the backdrop-filter

What is causing the return statement to not function properly in the Mongoose findOne method?

Automatically calculate the multiplication of a number by 10 in React JS within the State

Sending data using the AJAX method with integers

The unexpected postbacks caused by the ASP.NET MVC DropDownList appear to stem from JavaScript, catching me by surprise

"Enhance your Django website with a dynamic voting button using AJAX

Implementing nested popup windows using Bootstrap

Showcasing Portfolio Work in a User-Friendly Mobile Design

Unexpected event in Coffeescript and Express framework: a tangled web of mysteries

Obtain an array containing only unique values from a combination of arrays

What could be the root cause behind this Selenium mistake?

Is there a way to get an iframe to mimic the behavior of other media elements within a horizontal scrolling container?

What is the best way to update or reload an embedded application/pdf?

Error occurs when React-router 6 cannot render an error component

ModSecurity Action Causing AJAX Problem

What are the best practices for managing data input effectively?

AJAX allows developers to declare variables within their code to

I am encountering an issue with the Node library puppeteer when trying to integrate it with vue.js