Replace text inside html tags with in string in javascript?

Question

I have a scenario that need to Need Replace a string 2 ways

Input: Parameters-->string, AnnotationName, input

Case 1: And I should input <i>Annotaion</i> as <b>input</b>

Output:

{
 displayData: `And I should input <i> ${annotationName}</i> as <b>${userInput}</b>`, 
 requestData: `And I should input  '${annotationName}' as '${userInput}'`

}

I am trying for displayData property in fiddle but not able to acheive as expected, Can any one help on this

function rePlaceString (data, annotationName, userInput) {

      const startBtagIndex = data.indexOf('<b>');
      const endBtagIndex = data.indexOf('</b>');
      const startItagIndex = data.indexOf('<i>');
      const endItagindex = data.indexOf('</i>');
                let replaceString = '';

      if ((startBtagIndex > 0 && endBtagIndex > 0) && (startItagIndex > 0 && endItagindex >0)) {
        replaceString = data.substring(0, startItagIndex) + userInput + data.substr(endItagindex, data.length);
        replaceString = replaceString.substring(0, startBtagIndex) + annotationName + replaceString.substr(endItagindex, data.length)
      } else if (startBtagIndex > 0 && endBtagIndex > 0) {
       replaceString = replaceString.substring(0, startBtagIndex) + annotationName + replaceString.substr(endItagindex, data.length)
      } else if (startItagIndex > 0 && endItagindex >0) {
       replaceString = data.substring(0, startItagIndex) + userInput + data.substr(endItagindex, data.length);
      
      }
      
      
      
   // expected Result 
    return {displayData: replaceString, requestData: `And I should input  '${annotationName}' as '${userInput}'`};
    
}

console.log(rePlaceString(`And I should input <i>Annotaion</i> as <b>inoutUserName</b>`, 'UserName', 'Admin'), '***********')

https://jsfiddle.net/soumyagangamwar/n3zrhqj8/6/ More Details

Thanks In advance

Answer 1

I've reworked your function a little bit.

1. you have to cater for the length of the tags.
2. when you replace strings positions (index) will change
3. try not to do all replacements in one go.

function rePlaceString (data, annotationName, userInput) {

      let replaceString = data;
      const startBtagIndex = data.indexOf('<b>');
      const endBtagIndex = data.indexOf('</b>');
      if (startBtagIndex > 0 && endBtagIndex > 0 && startBtagIndex < endBtagIndex) {
            let first = replaceString.substring(0, startBtagIndex);
            let last = replaceString.substring(endBtagIndex+4, data.length);
                replaceString = first + annotationName + last;
      }

            
      const startItagIndex = replaceString.indexOf('<i>');
      const endItagindex = replaceString.indexOf('</i>');

      if (startItagIndex > 0 && endItagindex > 0 && startItagIndex < endItagindex) {
            let first = replaceString.substring(0, startItagIndex);
            let last = replaceString.substring(endItagindex+4, replaceString.length);
                replaceString = first + userInput + last;
      }

    // expected Result 
    return {displayData: replaceString, requestData: `And I should input  '${annotationName}' as '${userInput}'`};