jQuery function to find and replace

Question

I curreny use the following script to find and replace text on my website.

$("#content #tablelabel p").text(function (_, ctx) { return ctx.replace("Check In", "入住"); });

But there are hundreds of words to find and replace. Some of them share the same CSS path. Can you guys please tell me how to optimise that script and create a function to pass the CSS path and word to find and replace so I can eliminate repetition of the same scripts?

Also is it possible to pass multiple words to find with their replacement text. For an example without writing

$("#content #tablelabel p").text(function (_, ctx) { return ctx.replace("Room Type", "入住"); });
$("#content #tablelabel p").text(function (_, ctx) { return ctx.replace("Guests", "退房"); });

Can I do soemthing like

$("#content #tablelabel p").text(function (_, ctx) { return ctx.replace({'Room Type': '房间类型','Guests': '房间类型'}); });

Thanks

Why are you doing this using JS and not server side before outputting text in English? — dchayka
– dchayka, Commented Nov 17, 2015 at 1:20

Arun P Johny · Accepted Answer · 2015-11-13 03:08:55Z

5

You can iterate over an object an replace all the values in it like

var tags = {
  'Room Type': '入住',
  'Guests': '退房'
};
$("#content #tablelabel p").text(function(_, ctx) {
  $.each(tags, function(tag, text) {
    ctx = ctx.replace(tag, text);
  })
  return ctx;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div id="tablelabel">
    <p>Room Type</p>
    <p>Guests</p>
  </div>
</div>

answered Nov 13, 2015 at 3:08

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

nasty Over a year ago

Thanks Arun. That looks good. Is it possible to pass the CSS path as well? Becuase the CSS path can change for some words. So Ideally I can pass the URL and CSS path to the function and get it replaced. But I dont want to repeat the CSS path if its the same.

Donnie D'Amato Over a year ago

What do you mean by CSS path?

Shlomi Hassid · Accepted Answer · 2015-11-18 14:56:03Z

I had the same desire not long ago.

Consider this Usage (which I find more powerful & flexible):

//USAGE:
var pattern = [
    {
        selectors : ["p",".metoo","em"],
        find      : ["set", "me", "free"],
        replace   : ["#set#", "@me@", ">free<"] 
    },
    {
        selectors : ["h5"],
        find      : ["I", "quick", "easy"],
        replace   : ["^ $1 ^"]                      //$1 is a token to use matched value
    }
];

replaceText(pattern);

As you can see the function accepts an Array of Objects that defines the elements group, the text to find and the replacements. you can set as many as you want.

Some notes:

$1 - will be replaced by the matched value.
replace array must have at least one value - each matched text will be replaced by it corresponding replace text otherwise by the previous one.

JSnippet Demo

And Here is the function that implements that:

var replaceText = function(pat) {
    var ret = [];
    for (var i = 0; i < pattern.length; i++) {
        $(pattern[i].selectors.join(",")).text(function(ind,txt){  
            for (var j=0; j < pattern[i].find.length; j++) {
                if (typeof pattern[i].replace[j] !== 'undefined') {
                    rep = pattern[i].replace[j].replace("$1", pattern[i].find[j]);
                } else if (pattern[i].replace.length) {
                    rep = pattern[i].replace[pattern[i].replace.length-1].replace("$1", pattern[i].find[j]);
                } else { continue; }
                txt = txt.replace(pattern[i].find[j], rep);
            }
            return txt;
        });
    }
};

wogsland · Accepted Answer · 2015-11-19 21:58:26Z

5

$("#content #tablelabel p").text( function (_, ctx) {    
  return ctx.replace('Room Type','房间类型').replace('Guests','房间类型');   
});

edited Nov 19, 2015 at 21:58

wogsland

9,54121 gold badges63 silver badges99 bronze badges

answered Nov 19, 2015 at 21:44

sucil

1162 silver badges7 bronze badges

2 Comments

Shlomi Hassid Over a year ago

Should be: $('"#content, #tabelabel, p") you missed the coma.

trincot Over a year ago

@Shlomi Hassid, the space is intended and has a proper meaning.

Collectives™ on Stack Overflow

jQuery function to find and replace

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related