how to automatically replace a tag predefined

Question

I have some characters that need to be replaced as above but I don't know how:
characters to replace:

first   |  end  |
<day>   |       |
<red>   | </red>|
<a ###> | </>   |

day => get now day (ex: 14)
red => color red
<a ###https://www.google.com/>link</> => <a href="https://www.google.com/">link</>

input: hello <red>Mr.Siro</red>
output: hello <span style="color: red">Mr.Siro</span>

my chat.

Can you show me how to write a common function to check the replacement of the above tags? here is my code:

export const formatTags = (content) => {
  const firstTag = "<red>";
  const secondTag = "</red>";

  const tagsIndex = [...content.matchAll(new RegExp(firstTag, "gi"))].map(
    (a) => a.index
  );

  const initialContent = content;

  tagsIndex.forEach((index) => {
    const tagContent = initialContent.substring(
      index + firstTag.length,
      initialContent.indexOf(secondTag, index)
    );

    if (firstTag === "<red>") {
      content = content.replaceAll(
        `${firstTag}${tagContent}${secondTag}`,
        `<span style="color: red">${tagContent || "わからない"}</span>`
      );
    }
  });

  return content;
};

<span
   :class="(msg.image || msg.file) && msg.text ? 'mt-2' : ''"
   v-html="msg.text"
   v-linkified:options="{
    className: currentUserId === msg.senderId
     ? 'message-external-link'
     : '',
   }"
/>

sorry my english is not so good !
thanks all!

Also, will it always be `*` or can there be a `*` as well? Are there any other patterns other than mentioned in the question? — adiga, Dec 14 '22 at 07:52
@Teemu input is a string: hello hello and is show by me through v-html in vuejs — hoangnv, Dec 14 '22 at 07:56

adiga · Accepted Answer · 2022-12-14T09:26:35.150

3

You could create a Map of the replacement rules. The regex used to capture the text will be the key and the replacer function callback to be used in replace will the value. Loop through the rules and update the string.

const input = `Today is <day>th day of the month. 
I'd like <red> this text to be in red</red> 
and <blue>this to be in blue</blue>. 
Testing the links <a ###https://www.google.com/>with Google</>
and <a ###https://stackoverflow.com/>Stak Overflow</>`

function convert(str) {
  const replacerRules = new Map([
    [/<day>/g, new Date().getDate()],
    [/<([^>]+)>([^<]+)<\/\1>/g, (_, p1, p2) => `<span style="color: ${p1}">${p2}</span>`],
    [/<a #+([^>]+)>([^<]+)<\/>/g, (_, p1,p2) => `<a href="${p1}">${p2}</a>`]
  ])
  
  for (const [key, replacer] of replacerRules)
    str = str.replace(key, replacer)
  
  return str
}

console.log( convert(input) )
document.querySelector("div").innerHTML = convert(input)

<div />

edited Dec 14 '22 at 09:26

answered Dec 14 '22 at 08:10

adiga

34,372
9
61
83

thank you i tried it and it worked, how do i change the path in href ? – hoangnv Dec 14 '22 at 08:31
Change in the `Map` object's value here ``${p1}`` – adiga Dec 14 '22 at 09:01
sorry i was mistaken, i meant `link>` not `link>` so please show me how to insert link after ### thanks you very much ! – hoangnv Dec 14 '22 at 09:23
@hoangnv updated the third regex to get the URL from the text. That was not in the initial input – adiga Dec 14 '22 at 09:26
it worked beyond my expectations, thank you very much. but now there is a problem if i don't enter the value in the ex: `` it prints a space `` – hoangnv Dec 14 '22 at 09:52
@hoangnv You can probably change the second regex: `/<([^>]+)>([^<]+)<\/\1>/` to `/<([^>]+)>([^<]*)<\/\1>/` to make optional content within the tag. Please go through the regexes and test it out here: https://regex101.com/r/IkCZRB/1 – adiga Dec 14 '22 at 09:55

how to automatically replace a tag predefined

1 Answers1