Javascript Replace - Dynamic Value of Replacement

Question

I have a template in a String and I want to replace a few of the placeholders with the values that I have in another string. For every placeholder that I replace, I also want to insert a break tag.

For eg if #ADDRESS2# is found in the template, I am using the following code to replace all its occurrences with value in string val.address2.

    template_html = template_html.replace(/#ADDRESS2#/g, '<br />'+ val.address_2);

However there are scenarios when the string val.address2 is empty. In that case, I do not want to insert the break tag.

So I changed my code as follows

    if( val.address_2.length > 0 ) {
        template_html = template_html.replace(/#ADDRESS2#/g, '<br />'+ val.address_2);
    } else {
        template_html = template_html.replace(/#ADDRESS2#/g, '');
    }

Is there a better way to write the above code as I have multiple Placeholders and for each Placeholder I have to write the code 2 times.

Since jQuery is (primarily) a DOM manipulation library, it's not really relevant here. I've removed that tag. — Cerbrus
– Cerbrus, Commented Aug 13, 2019 at 14:22
why not use same template strings in the text and in the objects. it makes it easier to just replace with the same string. — Nina Scholz
– Nina Scholz, Commented Aug 13, 2019 at 14:22
Can you show more of those "multiple Placeholders" that you have? E.g. are they all quite regular or not, and how do they relate to the property names used for the replacement? — Peter B
– Peter B, Commented Aug 13, 2019 at 14:40
@nina yes, I can change the template to have same name as string. — ascsoftw
– ascsoftw, Commented Aug 13, 2019 at 15:03
@peter other vplaceholders are like City, State, zip. I can make the placeholder name same as object if that helps — ascsoftw
– ascsoftw, Commented Aug 13, 2019 at 15:05

Cerbrus · Accepted Answer · 2019-08-14 07:35:43Z

14

Use a regex replacement, to which you pass a function.

That function will get the replacement keys as input, and depending on if there's a replacement available, it will insert a empty string, or the replacement with a linebreak:

const template = "#foo# this bla bla #bar# but #baz# and stuff";

const replacements = {
  foo: "test",
  bar: "",
  baz: "not empty"
};

const result = template.replace(/#([^#]+)#/g, (match, key) => {
  // If there's a replacement for the key, return that replacement with a `<br />`. Otherwise, return a empty string.
  return replacements[key] !== undefined
    ? "<br />" + replacements[key]
    : "";
});

console.log("template:", template);
console.log("result:", result);

The only "gotcha" here is that the keys in the template string have to match the keys in your replacements object. That's not necessarily a bad thing, though, as it would make it slightly more intuitive if you'd look back at your code later on.

The regex may look intimidating, but it's really quite simple:

/#([^#]+)#/g

/: The start of the regex,
#: Literally the # character,
(: The start of a capturing group,
[^#]+ Any character that isn't a #. The + makes sure it matches as many as possible,
): The end of a capturing group,
#: Literally the # character,
/g: The end of the regex. g is the global flag, so it doesn't stop at the first result.

The capturing group basically tells the regex to group everything that's between the brackets. The groups are then returned individually.

edited Aug 14, 2019 at 7:35

answered Aug 13, 2019 at 14:06

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

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

4 Comments

ascsoftw Over a year ago

Thanks this worked. Also thanks for explaining the regex used

Cerbrus Over a year ago

I'm glad to be of help. The "accept" vote is appreciated :-)

barbsan Over a year ago

@Cerbrus you could capture a group .replace(/#([^#]+)#/g, (match, key) => { to avoid removing # with second regex

Cerbrus Over a year ago

@barbsan: That's much better! Thanks for the tip :D

mplungjan · Accepted Answer · 2019-08-13 14:17:50Z

2

Perhaps you meant this?

var val = {
  "address_1": "Address 1",
  "address_2": "",
  "address_10": "Address 10",
}  
var template_html = `My address is #ADDRESS1# delivery address is #ADDRESS2# and billing is #ADDRESS10#`
template_html = template_html.replace(/#ADDRESS(\d+)#/g, function(addr, num) { 
  var str = val["address_"+num]; return str?str+"<br/>":""
})
console.log(template_html)

edited Aug 13, 2019 at 14:17

answered Aug 13, 2019 at 14:14

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

Peter B · Accepted Answer · 2019-08-13 15:10:06Z

0

If the same logic should be applied for multiple address fields, then you might benefit from a helper function:

template_html = template_html
    .replace(/#CITY1#/g, PrefixBrIfNotEmpty(val.city_1))
    .replace(/#CITY2#/g, PrefixBrIfNotEmpty(val.city_2))
    .replace(/#CITY3#/g, PrefixBrIfNotEmpty(val.city_3))
    .replace(/#ADDRESS1#/g, PrefixBrIfNotEmpty(val.address_1))
    .replace(/#ADDRESS2#/g, PrefixBrIfNotEmpty(val.address_2))
    .replace(/#ADDRESS3#/g, PrefixBrIfNotEmpty(val.address_3));

function PrefixBrIfNotEmpty(str) {
    return str ? '<br />' + str : '';
}

edited Aug 13, 2019 at 15:10

answered Aug 13, 2019 at 14:19

Peter B

24.7k5 gold badges42 silver badges94 bronze badges

Comments

barbsan · Accepted Answer · 2019-08-13 14:02:38Z

-1

You can use ternary operator (empty string evaluates to false)

template_html = template_html.replace(/#ADDRESS2#/g, val.address_2 ? '<br />'+ val.address_2 : '');

answered Aug 13, 2019 at 14:02

barbsan

3,46811 gold badges23 silver badges29 bronze badges

3 Comments

Cerbrus Over a year ago

This replacement would still have to be programmed for every replacement key the OP wants to replace.

barbsan Over a year ago

Yes, but it's still shorter than if else block

Cerbrus Over a year ago

Still, multiple placeholders is part of the OP's problem.

rpeh · Accepted Answer · 2019-08-13 14:05:04Z

-1

The simplest change is to use the ternary operator like this:

template_html = template_html.replace(/#ADDRESS2#/g, ( val.address_2.length > 0 ) ? '<br />'+ val.address_2 : '');

Still not particularly elegant but a bit shorter than the original.

answered Aug 13, 2019 at 14:05

rpeh

174 bronze badges

1 Comment

Cerbrus Over a year ago

This replacement would still have to be programmed for every replacement key the OP wants to replace.

Nina Scholz · Accepted Answer · 2019-08-13 14:33:53Z

-1

You could take the value with a check.

template_html = template_html.replace(
    /#ADDRESS2#/g,
    val.address_2 && '<br />' + val.address_2
);

For more than one placeholder, you could take a dynamic approach and use same pattern for the search and replacements.

var val = { address_2: 'foo', country_1: 'bar' }
    template_html = 'Address: #ADDRESS2#\nCountry: #COUNTRY1#\nnothing: #NOTHING#'

template_html = template_html.replace(
    /#([^#]+)#/g,
    (_, group) => {
        var key = group.match(/^(\D+)(\d*)$/).slice(1).map(s => s.toLowerCase()).join('_');

        return (val[key] || '') && '<br />' + val[key];
     }
);
console.log(template_html);

For getting a smarter replacement, yoou could take the idea of same strings as tempate and for getting the data from an object. In this case, take the replacement value and take this as key for the object or take an empty string for unknown values.

var val = { ADDRESS2: 'foo', COUNTRY1: 'bar' }
    template_html = 'Address: #ADDRESS2#\nCountry: #COUNTRY1#\nnothing: #NOTHING#'

template_html = template_html.replace(
    /#([^#]+)#/g,
    (_, key) => (val[key] || '') && '<br />' + val[key]
);
console.log(template_html);

edited Aug 13, 2019 at 14:33

answered Aug 13, 2019 at 14:01

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

1 Comment

Cerbrus Over a year ago

Well, I've said this before, but you have a way of making code work, but hard to understand. Maybe that's why some people downvoted the answer.

Ismael Miguel · Accepted Answer · 2019-08-13 14:59:13Z

-1

You mean, something like this:

template_html = template_html.replace(/#ADDRESS(\d+)#/g, function(address, number) {
    return val.hasOwnProperty('address_' + number)
        ? '<br />' + val['address_' + number]
        : '';
};

You should use the val.hasOwnProperty just in case that val.['address_' + number] contains a value like 0, false, '', undefined, NaN or other falsy values.
It makes sure the value is displayed anyway, because an undefined isn't the same as not having the property at all.

It also avoids to get a value from the prototype, just in case.

This is based on mplungjan's answer.

If this is undesirable, and you only want to show strings, try this:

template_html = template_html.replace(/#ADDRESS(\d+)#/g, function(address, number) {
    return val.hasOwnProperty('address_' + number)
    && val['address_' + number].length
    && (
        (typeof val['address_' + number]) === 'string'
        || val['address_' + number] instanceof String
    )
        ? '<br />' + val['address_' + number]
        : '';
};

All of this checking ensures that it is a non-empty string (or String instance, because new String() returns a string object).
Checking if it is an instance of String prevents issues due to typeof new String() returning object.

Arrays and array-like objects have a length attributes (e.g.: jQuery instance, NodeList, {length: 1}, [0] and similars), but you dont want to show them as strings.

edited Aug 13, 2019 at 14:59

answered Aug 13, 2019 at 14:23

Ismael Miguel

4,2691 gold badge35 silver badges44 bronze badges

4 Comments

Cerbrus Over a year ago

Why would the val object contain arrays though?

Ismael Miguel Over a year ago

@Cerbrus Why wouldn't it? It is just an object. The O.P. didn't specify that it wouldn't have an array, or that it would be guaranteed to only have strings or no value at all. As far as I know, you can do var val = {address2: [] }, as it is part of the basics of JavaScript. Since nothins much was specified about val, there's nothing wrong about taking some extra care.

Cerbrus Over a year ago

It seems excessive, just as the combination of a typeof and a instanceOf check. One makes the other redundant.

Ismael Miguel Over a year ago

Not really. As I've explained, new String() returns a string object, which acts like a string literal in every single aspect, except when checking the type with typeof, which returns object instead of the expected string. Also, doing '' instanceof String returns false. But yes, it is a bit excessive.

Collectives™ on Stack Overflow

Javascript Replace - Dynamic Value of Replacement

7 Answers 7

4 Comments

Comments

Comments

3 Comments

1 Comment

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

Comments

Comments

3 Comments

1 Comment

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related