Simple javascript search-and-replace

Question

I know zero javascript, and have one simple task:

Find all text in the current html of the form [[.+?]]
Extract the content of the brackets
Replace all space characters with underscores
Instead of the entire expression, output <img src="foo.com/$1.jpg"/>, where $1 is the matched text (after spaces have been replaced).
(This should be done for all text inside [[]] in the html)

Can I bother you with a snippet that does this?

Have you tried anything yet? Give us some indication of effort here. — Crescent Fresh
– Crescent Fresh, Commented Oct 30, 2009 at 18:45
Well, I've tried posting it to SO, but that didn't help so far. — ripper234
– ripper234, Commented Oct 30, 2009 at 18:47

Ateş Göral · Accepted Answer · 2009-10-30 19:36:45Z

2

Assuming you already have the HTML source in a variable called html, you can do something like this:

var converted = html.replace(/\[\[(.+?)\]\]/g, function (s, token) {
    return '<img src="foo.com/'
        + token.split(" ").join("_")
        + '.jpg"/>';
});

To get or set the entire HTML inside <body>, you can use document.body.innerHTML. However, I would recommend specifically targeting elements of a certain id or class, if that string pattern doesn't really appear in random places in the page. I would also recommend that you use jQuery for locating these elements and changing their content:

$(".replacable").each(function () {
    this.html(imagize(this.html()));
});

function imagize(html) {
    return html.replace(/\[\[(.+?)\]\]/g, ...);
}

edited Oct 30, 2009 at 19:36

answered Oct 30, 2009 at 19:30

Ateş Göral

141k27 gold badges142 silver badges191 bronze badges

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

1 Comment

ripper234 Over a year ago

+1 for reminding me to run it only on certain elements and not the entire html

Collectives™ on Stack Overflow

Simple javascript search-and-replace

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