javascriptarraysregexjavascript-objectsvue-filter

Find and replace all matches in a string

I'm trying to create a filter to replace characters in articles.

I want to find all matching elements in a string and replace them with an element from an array, but it doesn't work. How to fix it?

//string to replace -> ”Lorem ipsum dolor sit amet – consectetur adipiscing elit. Suspendisse vitae augue ornare, ultricies ligula at, tempor felis – aenean ac placerat turpis. Nullam finibus lacus sit amet tortor consequat, venenatis malesuada eros volutpat. Proin varius nibh sit amet urna lobortis placerat. Donec rhoncus nibh vitae ultricies rutrum. Curabitur porta nisi eu rhoncus pulvinar. Nulla sit amet sollicitudin odio. Aliquam mi odio, malesuada ac arcu vitae, bibendum convallis risus.„

function charReplace(value) {
    let desc = value;
    const toReplace = {
        '–': '–',
        '”': '"',
        '„': '"'
    };
    for (let key in toReplace) {
        desc.replace(key, toReplace[key]);
    }
    return desc;
}

Solution

  • Solution 1

    With .split(...).join(...):

    // string to replace
const string = '”Lorem ipsum dolor sit amet – consectetur adipiscing elit. Suspendisse vitae augue ornare, ultricies ligula at, tempor felis – aenean ac placerat turpis. Nullam finibus lacus sit amet tortor consequat, venenatis malesuada eros volutpat. Proin varius nibh sit amet urna lobortis placerat. Donec rhoncus nibh vitae ultricies rutrum. Curabitur porta nisi eu rhoncus pulvinar. Nulla sit amet sollicitudin odio. Aliquam mi odio, malesuada ac arcu vitae, bibendum convallis risus.„';

function charReplace(value) {
    const toReplace = {
        '–': '–',
        '”': '"',
        '„': '"'
    };

    let desc = value;

    for (const key of Object.keys(toReplace)) {
        desc = desc.split(key).join(toReplace[key]);
    }
    
    return desc;
}

console.log(charReplace(string));

    Solution 2

    With iterating over the replacements and replace them using .replace(new RegExp(...)):

    // string to replace
const string = '”Lorem ipsum dolor sit amet – consectetur adipiscing elit. Suspendisse vitae augue ornare, ultricies ligula at, tempor felis – aenean ac placerat turpis. Nullam finibus lacus sit amet tortor consequat, venenatis malesuada eros volutpat. Proin varius nibh sit amet urna lobortis placerat. Donec rhoncus nibh vitae ultricies rutrum. Curabitur porta nisi eu rhoncus pulvinar. Nulla sit amet sollicitudin odio. Aliquam mi odio, malesuada ac arcu vitae, bibendum convallis risus.„';

function charReplace(value) {
    const toReplace = {
        '–': '–',
        '”': '"',
        '„': '"'
    };
    
    let desc = value;

    for (const entity of Object.keys(toReplace)) {
        desc = desc.replace(new RegExp(entity, 'g'), toReplace[entity]);
    }
    
    return desc;
}

console.log(charReplace(string));

    Solution 3 (customizable replacements)

    With joining the replacements and use a replacer function:

    .replace(new RegExp(Object.keys(replacements).join('|'), 'g'), match => replacements[match])


    // string to replace
const string = '”Lorem ipsum dolor sit amet – consectetur adipiscing elit. Suspendisse vitae augue ornare, ultricies ligula at, tempor felis – aenean ac placerat turpis. Nullam finibus lacus sit amet tortor consequat, venenatis malesuada eros volutpat. Proin varius nibh sit amet urna lobortis placerat. Donec rhoncus nibh vitae ultricies rutrum. Curabitur porta nisi eu rhoncus pulvinar. Nulla sit amet sollicitudin odio. Aliquam mi odio, malesuada ac arcu vitae, bibendum convallis risus.„';

function replace(string, replacements) {
    return string.replace(new RegExp(Object.keys(replacements).join('|'), 'g'), match => replacements[match]);    
}

console.log(replace(string, {
  '–': '–',
  '”': '"',
  '„': '"'
}));