javascript - 替换字符串时如何避免重复？

Question

我遇到一个问题，我需要用一些 HTML 替换所选文本以实现注释功能。我开始替换文本。但现在的问题是文档可能包含重复的字符串，当我尝试替换它时，它总是替换段落中的第一个实例。我的代码如下。

需要替换相应位置处的 json 中的所有注释。谁能帮助我如何在精确位置替换/插入文本？

for (var i = 0; i < AnnotationDetails.length; i++)
        {
            //locate the string between start and end point
            var TextToReplace = OutPutText.substring(AnnotationDetails[i].start, AnnotationDetails[i].end);
            //prepare replace text
            var AnnotationClass = '<mark data-entity="' + AnnotationDetails[i].label + '" data-id="' + AnnotationDetails[i]._id + '">' + TextToReplace + '</mark>';
            var AnnotationText = $('.output').html();
            //put text back as html to div
            $('.output').html(AnnotationText.replace(TextToReplace, AnnotationClass));
        }

下面给出了 json。

"annotations": [
        {
            "_id": "FWFpjaec",
            "start": "6123",
            "end": "6155",
            "label": "support"
        }
    ]

我有一个段落，其中字符串“规划和保护联盟”在两个位置可用。所以每当我尝试替换第二个实例时，javascript总是替换第一个实例。 json中的起点和终点是精确的，但是有什么方法可以在精确位置替换它？

Answer 1

如果我理解正确的话，你有一个正则表达式问题。 String.replace该方法可以接受正则表达式以及第一个参数。

因此，由于我不知道您的代码中的 textToReplace 是什么，所以我给您提供了我的示例以便更好地理解。

const q=el=>document.querySelector(el);//dont mind this line

const txt=q("div").innerText;
console.log(txt)//test test test

const strOne=txt.replace("test","hey")//this will change the first one only
q("#stringAsFirstParam").innerText=strOne

const regexOne=txt.replace(/test/g,"hey")//i set the global flag as well so it wont stop afther the first match

q("#regexAsFirstParam").innerText=regexOne

<div>test test test</div>

<div id="stringAsFirstParam"></div>
<div id="regexAsFirstParam"></div>

因此只需运行代码片段即可理解并检查代码

<小时/>

由于您要求替换特定的事件，所以我只准备了另一个片段，请检查一下

 const q=el=>document.querySelector(el);//dont mind this line

const txt=q("div").innerText;
console.log(txt)//test test test

const strOne=txt.replace("test","changed");//this will change the first one only
q("#stringAsFirstParam").innerText=strOne

const regexOne=txt.replace(/test/g,"changed");//i set the global flag as well so it wont stop afther the first match

q("#regexAsFirstParam").innerText=regexOne

let count=0
const WhichOneDoINeed=2
let current=0
const secondOnly= txt.replace(/test/g,function(match){
  if (++current==WhichOneDoINeed){
    return "changed"
  }
  return match
  
})
q("#secondOnly").innerText=secondOnly

<div>test test test</div>

<div id="stringAsFirstParam"></div>
<div id="regexAsFirstParam"></div>
<div id="secondOnly"></div>