randomly replace a substring in a block of text in javascript or jquery

Question

how would i randomly replace a string in a text using javascript or jquery?

given: <p>foo bar foo baz foo</p>

I want to just randomly replace 1 occurrence of 'foo' with 'buz', so possible results would be:

<p>buz bar foo baz foo</p>
<p>foo bar buz baz foo</p>
<p>foo bar foo baz buz</p>

Ricardo Lohmann · Accepted Answer · 2012-08-17 22:07:01Z

3

var $element = $('p');
var string = 'foo';
var count = $element.text().match(string, 'g').length;

if(count) {
    var rand = Math.floor((Math.random() * count) + 1);
    $element.text(function(i, text) {
        var matchNumber = 0;
        return text.replace(new RegExp(string, 'g'), function(text) {
            matchNumber++;
            if(matchNumber == rand) {
                return 'buz';
            }
            return text;
        });
    });
}

Explanation:
First of all we have to know the range to the random. We can get it matching the string and then get the length.

Then you have to match it again and increase a counter which will be used to know which match is the currently one.

If the current match is equal to the random number we have to replace the text.

demo

edited Aug 17, 2012 at 22:07

answered Aug 17, 2012 at 22:01

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chovy Over a year ago

This works perfectly...except I have one rub -- I want to do the replacement 1 or 2 times at random. So BUZ would show up once or twice in the result.

Collectives™ on Stack Overflow

randomly replace a substring in a block of text in javascript or jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related