將 html 標簽內的文本替換為 javascript 中的字符串？

Question

我有一個需要用 2 種方式替換字符串的場景

輸入：Parameters-->string, AnnotationName, input

情況 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}'`

}

我正在嘗試 displayData property in fiddle 但無法達到預期的效果，任何人都可以幫助解決這個問題

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/更多詳情

提前致謝

Answer 1

我對你的 function 做了一些修改。

1. 您必須滿足標簽的長度。
2. 當您替換字符串時，位置（索引）會改變
3. 盡量不要在一個 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}'`};