如何用一个替换术语安全地替换每个搜索，而前者是后者的一部分而不遇到再次替换此类搜索的一部分？

Question

var string = "Please click on dashboard and then open the dashboard details to verify your details on the data";
var stringArray = ["dashboard" , "dashboard" , "data"]
var replaceArray = ["https://abcd.com/login" , "https://abcd.com/home" , "https://abcd.com/data"]
for(i=0;i<stringArray.length; i++){
    string = string.replace(stringArray[i].trim(), "<a href='"+replaceArray[i].trim()+"'>"+stringArray[i].trim()+"</a>");
}

我有一个字符串和2个阵列。如两个阵列中所述，我需要将字符串替换为各自的锚链接标签。 StringArray定义要链接的单词，并替换应添加URL。就像第一次出现仪表板一样，应与“ https://abcd.com/login”链接，第二次出现“仪表板”的情况应与“ https：//abcd.com/home”和“数据”更换。带有“ https://abcd.com/data”。

我试图在字符串中找到单词，并使用repent/replaceAll替换它，对单个出现单词正常工作，但是对于多次出现，它无法正常工作。

任何人都帮助我解决这个问题。

结果：

"Please click on <a href='https://abcd.com/login'><a href='https://abcd.com/home'>dashboard</a></a> and then open the dashboard details to verify your details on the <a href='https://abcd.com/data'>data</a>"

预期输出：

"Please click on <a href='https://abcd.com/login'>dashboard</a> and then open the <a href='https://abcd.com/home'>dashboard</a> details to verify your details on the <a href='https://abcd.com/data'>data</a>"

Answer 1

When using a string as the first parameter (substring) to the Javascript 替换 函数，替换将发现并仅替换第一次出现子字符串。这就是为什么您的“登录”和“ HOME”链接都嵌套在“仪表板”的第一次出现的原因，其余的“仪表板”的出现保持不变。使用是一种解决方案，但是不是唯一的解决方案...

使用 a>跟踪最后一个索引，其中 strarray 的单词，然后 - ing字符串，从那里继续进行替换搜索：

var string = "Please click on dashboard and then open the dashboard details to verify your details on the data";
var stringArray = ["dashboard", "dashboard", "data"]
var replaceArray = ["https://abcd.com/login", "https://abcd.com/home", "https://abcd.com/data"]

// keep track of last position of matched string
let ii = 0;

for (i = 0; i < stringArray.length; i++) {
  let str = stringArray[i].trim();
  let repstr = '<a href="' + replaceArray[i].trim() + '">' + str + '</a>';

  // move position to index of matched string
  ii += string.slice(ii).indexOf(str);
  string = 
    // this is the portion of string before and including last replacement
    string.slice(0, ii) 
    // this is the portion after last replacement
    + string.slice(ii).replace(str, repstr);

  // move position to past current replacement
  ii += repstr.length;
}
console.log(string);
// Please click on <a href="https://abcd.com/login">dashboard</a> and then open the <a href="https://abcd.com/home">dashboard</a> details to verify your details on the <a href="https://abcd.com/data">data</a>

该解决方案基准 大约比正则表达解决方案以及我在下面发布的减少解决方案。

---

这是一种将单词并链接到一个数组中的解决方案，然后使用 降低 迭代数组 replace_arr ，更新字符串字符串，并维护匹配索引 ii ：

let string = "Please click on dashboard and then open the dashboard details to verify your details on the data";
const replace_arr = [["dashboard", "https://abcd.com/login"], ["dashboard", "https://abcd.com/home"], ["data", "https://abcd.com/data"]];

replace_arr.reduce(
  (ii, [str, link]) => {
    let repstr = '<a href="' + link + '">' + str + '</a>';
    ii += string.slice(ii).indexOf(str);
    string = string.slice(0, ii) 
      + string.slice(ii).replace(str, repstr)
    return ii + repstr.length;
  }
  , 0
);

console.log(string);
// Please click on <a href="https://abcd.com/login">dashboard</a> and then open the <a href="https://abcd.com/home">dashboard</a> details to verify your details on the <a href="https://abcd.com/data">data</a>

---

与 redaim（）函数中的 string 的重构减少方法，以便在 函数中进行处理，并在内部处理几乎将执行时间切成一半，与将字符串访问到外部到达每次迭代的还原过程：

let string = "Please click on dashboard and then open the dashboard details to verify your details on the data";
const replace_arr = [["dashboard", "https://abcd.com/login"], ["dashboard", "https://abcd.com/home"], ["data", "https://abcd.com/data"]];

[string] = replace_arr.reduce(([ss, ii], [str, link]) => {
  let repstr = '<a href="' + link + '">' + str + '</a>';
  ii += ss.slice(ii).indexOf(str);
  return [ss.slice(0, ii) +
    ss.slice(ii).replace(str, repstr), ii + repstr.length
  ];
}, [string, 0]);

console.log(string);
// Please click on <a href="https://abcd.com/login">dashboard</a> and then open the <a href="https://abcd.com/home">dashboard</a> details to verify your details on the <a href="https://abcd.com/data">data</a>

...最终解决方案基准的速度几乎是 REGEX解决方案。 :)

Answer 2

在这里，使用Regex带有Lookaround的解决方案：

const text = "Please click on dashboard and then open the dashboard details to verify your details on the data or the other data";
const tokens = ["dashboard", "dashboard", "data", "data"]
const links = ["https://abcd.com/login", "https://abcd.com/home", "https://abcd.com/data", "https://abcd.com/dashboard/data"]

var result = text;

for (i = 0; i < tokens.length; i++) {
  const re = new RegExp('(?<=.*)((?<= )' + tokens[i] + '(?= |$))(?=.*)');
  result = result.replace(re, '<a href="' + links[i] + '">
amp;</a>'); //TODO array length validation
}

console.log(result)

此正则是对被白色空间包围的令牌工作，以避免更换URL内部的文本。

您可以看到有关LookAhead和lookBehind 在这里以及浏览器compatibility 在这里。

Answer 3

那一个人呢，

var string = "Please click on dashboard and then open the dashboard details to verify your details on the data";
const stringArray = string.split(' ');
var targetTexts = ["dashboard" , "dashboard" , "data"]
var replaceTexts = ["https://abcd.com/login" , "https://abcd.com/home" , "https://abcd.com/data"]

const resultArray = []
for (let i = 0; i < stringArray.length; i++) {
  const word = stringArray[i];
  const targetTextIndex = targetTexts.indexOf(word);
  
  if (targetTextIndex > -1) {
    resultArray.push("<a href='"+replaceTexts[targetTextIndex]+"'>"+word+"</a>")
    targetTexts = targetTexts.filter((_el, idx) => idx !== targetTextIndex)
    replaceTexts = replaceTexts.filter((_el, idx) => idx !== targetTextIndex)

  } else {
    resultArray.push(word);
  }
}

console.log(resultArray.join(' '))

我希望您对此有一个暗示。
它的工作就像魅力一样，将有例外处理供您处理。

Answer 4

提出的方法由

• a 地图 ping任务首先合并两个相关数组，搜索术语列表和列表超文本引用，替换项目的另一个数组。

• a 代码> 处理替换项目列表并安全的任务（没有遇到相同但已经替换搜索））替换每个搜索的相关完整的超文本表达式。

第二部分可以通过使用 offset 替换 方法。在 Offset 值上，当前匹配索引，可以通过编程方式（而降低）将最初提供的字符串值分为已处理和未加工的子字符串/部分。 降低任务的阵列结果获取 join ed返回最终完全替换为字符串值。

function createReplacementItemFromBoundHrefs(search, idx) {
  const hrefList = this;
  return {
    search,
    href: hrefList[idx],
  }
}
function aggregateSafelyReplacedHrefPartials(partials, { search, href }) {
  // intentionally mutates `partials`, an array of zero to many
  // processed substrings and always an unprocessed (last item)
  // `target` substring of the originally provided string value.
  const target = partials.pop();

  let sliceAt;
  const result = target
    .replace(

      // a case insensitive search regex.
      RegExp(`${ search }`, 'i'),

      // a replacer function which helps preventing multiple
      // manipulations of always the same search/replace term.
      (match, offset) => {
        const replacement = `<a href="${ href }">${ match }</a>`;

        sliceAt = offset + replacement.length;

        return replacement;
      },
    );

  return [
    ...partials,              // - processed lately.
    result.slice(0, sliceAt), // - processed latest.
    result.slice(sliceAt),    // - to be processed.
  ];
}

function safelyReplaceSearchWithRelatedHref(str, searchList, hrefList) {
  return searchList
    .map(createReplacementItemFromBoundHrefs, hrefList)
    .reduce(aggregateSafelyReplacedHrefPartials, [str])
    .join('');
}

const string = "Please click on dashboard and then open the dashboard details to verify your details on the data";

const stringArray = [
  "dashboard",
  "dashboard",
  "data",
];
const replaceArray = [
  "https://abcd.com/login",
  "https://abcd.com/home",
  "https://abcd.com/data",
];

console.log(
  'before ... ',
  string,
  '\n\nafter ... ',
  safelyReplaceSearchWithRelatedHref(string, stringArray, replaceArray),
);
console.log(
  stringArray
    .map(createReplacementItemFromBoundHrefs, replaceArray) 
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

“我还有另一个用例，有一个出现数组，我只想从字符串中替换该特定的出现单词。从下方，仪表板的1和3出现应替换数据的出现，以及第二个出现数据。您可以帮助我。?? [...] var string ='在仪表板上，然后打开仪表板的详细信息，验证您的仪表板详细信息和其他数据['dashboard'，'dashboard'，'data']; data']; “ - siva_k22

为此，可以轻松地将上述第一个解决方案重构为新的解决方案，该解决方案可以保持两个折叠方法。

• 第一个任务是创建一个替换跟踪器，该跟踪器使替换函数能够跟踪每个搜索当前的出现计数和替换。

• 第二个任务直接做替换 通过

  提供的原始字符串

  • 一个案例不敏感的正则是任何可能的单词/搜索...和...
  • a 跟踪每个搜索的发生，并且在搜索当前的发生时数量决定是否真正替换通过其相关的完整超文本引用或仅与自身的搜索（其自己的匹配）。

  
  

  
  

“@peterseliger-是的，但是我用下面的正则= string = string.replace（new Regexp（“（？：（？：（？）：（？：。| \ n）*？”+currentstring+”） {“+fackence+“}”），function（x）{return x.Replace（regexp（currentstring+“ $”），替换）}）;“ - siva_k22

再次仅是正则方法的方法将永远不会像真正跟踪搜索事件的那样可靠（也不那么可读），并且实施了这两个目标一方面是通用的，但也足够专业（只有一定的方法唯一的方法是在早期的限制。后一个术语）。

function aggregateReplacementTrackerFromBoundData(collector, search, idx) {
  const { occurrences = [], hrefList = [], tracker = {} } = collector;

  // create and/or access and aggregate
  // a search specific occurrence tracker.
  (tracker[search.toLowerCase()] ??= {
    occurrence: {},
    occurrenceCount: 0,
  })
  .occurrence[ occurrences[idx] ] = hrefList[idx];

  return { occurrences, hrefList, tracker };
}
function safelyReplaceSearchOccurrencesWithRelatedHref(
  str, searchList, hrefList, occurrences,
) {
  // create an overall replacement tracker for any search.
  const { tracker } = searchList
    .reduce(aggregateReplacementTrackerFromBoundData, {
      occurrences,
      hrefList,
      tracker: {},
    });

  return str
    .replace(

      // a case insensitive regex which features any possible word/search.
      RegExp(`\\b(?:${ searchList.join('|') })\\b`, 'gi'),

      // a replacer function which keeps track of each search's occurrence
      // and upon a search's current occurrence count decides whether to
      // really replace a search by its related full hypertext reference
      // or just with itself (its very own match).
      (match/*, offset, target*/) => {
        const searchTracker = tracker[match.toLowerCase()];

        const count = ++searchTracker.occurrenceCount;
        const href = searchTracker.occurrence[count] ?? null;

        return (href !== null)
          && `<a href="${ href }">${ match }</a>`
          || match;
      },
    );
}

const string = "On dashboard, then open dashboard details, verify your dashboard details on data and other data";

const wordsArray = [
  "dashboard",
  "dashboard",
  "data",
];
const occurrences = [1 , 3 , 2];

const linksArray = [
  "https://abcd.com/login",
  "https://abcd.com/home",
  "https://abcd.com/data",
];

console.log(
  'before ... ',
  string,
  '\n\nafter ... ',
  safelyReplaceSearchOccurrencesWithRelatedHref(
    string, wordsArray, linksArray, occurrences,
  ),
);
console.log({
  replacementTracker: wordsArray
    .reduce(aggregateReplacementTrackerFromBoundData, {
      occurrences,
      hrefList: linksArray,
      tracker: {},
    })
    .tracker
});

.as-console-wrapper { min-height: 100%!important; top: 0; }