问题

代码中的主要目标是突出显示可编辑 div 中的特定单词。当前的方法是使用正则表达式匹配位于 { words } 或 [ words ] 中的关键字。

const regexpSquareBracket = /\[[^\]]*\]/gm;
const regexCurlyBracket = /\{[^\}]*\}/gm;
  
const squareBracketMatches = text.match(regexpSquareBracket);
const curlyBracketMatches = text.match(regexCurlyBracket);

上述代码可以正确识别这些文本。

Here is [the] sample [text] that matches the [certain words] in the given [text] and {highlight} the words in the text.

然而，用于突出显示文本的代码并不理想，因为它只匹配单个关键字，而不是多个关键字组合。

你需要改进以下代码的解决方案，以便也匹配多个关键字的组合。

var text = `Here is [the] sample [text] that matches the [certain words] in the given [text] and {highlight} the {words in the text}.`

// 找到给定列表中的字符索引
const indexesOf = (arr, item) => 
  arr.reduce(
    (acc, v, i) => (v === item && acc.push(i), acc),
  []);

const regexpSquareBracket = /\[[^\]]*\]/gm;
const regexCurlyBracket = /\{[^\}]*\}/gm;
  
const squareBracketMatches = text.match(regexpSquareBracket);
const curlyBracketMatches = text.match(regexCurlyBracket);

let splittedText = text.split(" ");

if (squareBracketMatches) {
  squareBracketMatches.forEach(function(match) {
    var positions = indexesOf(splittedText, match)
    positions.forEach(function(pos) {
      splittedText[pos] = `<span class="highlight-bracket">${splittedText[pos]}</span>`
    })
  })
}

if (curlyBracketMatches) {
  curlyBracketMatches.forEach(function(match) {
    var positions = indexesOf(splittedText, match)
    positions.forEach(function(pos) {
      splittedText[pos] = `<span class="highlight-curly">${splittedText[pos]}</span>`
    })
  })
}
console.log(splittedText.join(" "))

请注意，这里的代码示例是为了突出显示文本中的方括号和花括号中的关键字，并创建 span 元素进行突出显示。你可以根据自己的需求进行进一步的定制。

英文:

The goal is to highlight certain words on the contenteditable div. Currently my approach is that using the regex to match the keywords that are inside { words } or [ words ].

const regexpSquareBracket = /\[[^\]]*\]/gm;
const regexCurlyBracket = /\{[^\}]*\}/gm;
  
const squareBracketMatches = text.match(regexpSquareBracket);
const curlyBracketMatches = text.match(regexCurlyBracket);

Above code working fine that correctly identifies this text.

Here is [the] sample [text] that matches the [certain words] in the given [text] and {highlight} the words in the text.

However the code I have for highlighting the text is not great because it only matches the single keyword rather than [multiple keywords compine].

I need you to give me the solution for how to improve below code that also matches the multiple keywords compine.

var text = Here is [the] sample [text] that matches the [certain words] in the given [text] and {highlight} the {words in the text}.

// Find character index in a given list
const indexesOf = (arr, item) =>
arr.reduce(
(acc, v, i) => (v === item && acc.push(i), acc),
[]);

const regexpSquareBracket = /[[^]]]/gm;
const regexCurlyBracket = /{[^}]}/gm;

const squareBracketMatches = text.match(regexpSquareBracket);
const curlyBracketMatches = text.match(regexCurlyBracket);

let splittedText = text.split(" ");

if (squareBracketMatches) {
squareBracketMatches.forEach(function(match) {
var positions = indexesOf(splittedText, match)
positions.forEach(function(pos) {
splittedText[pos] = <span class="highlight-bracket">${splittedText[pos]}</span>
})
})
}

if (curlyBracketMatches) {
curlyBracketMatches.forEach(function(match) {
var positions = indexesOf(splittedText, match)
positions.forEach(function(pos) {
splittedText[pos] = <span class="highlight-curly">${splittedText[pos]}</span>
})
})
}
console.log(splittedText.join(" "))

答案1

得分: 1

I'll provide the translated code section:

var text = `这是一个匹配给定文本中的特定单词并高亮文本中的单词的示例文本。`

const removeDuplicates = arr => [...new Set(arr)];

const regexpSquareBracket = /\[[^\]]*\]/gm;
const regexCurlyBracket = /\{[^\}]*\}/gm;

const squareBracketMatches = text.match(regexpSquareBracket);
const curlyBracketMatches = text.match(regexCurlyBracket);

for (const sq of removeDuplicates(squareBracketMatches))
  text = text.replaceAll(sq, `<span class="highlight-bracket">${sq}</span>`)

for (const curly of removeDuplicates(curlyBracketMatches))
  text = text.replaceAll(curly, `<span class="highlight-curly">${curly}</span>`)

console.log(text)

Note: I have translated the JavaScript code and left the code parts, such as variable names and regular expressions, as is.

英文:

var text = `Here is [the] sample [text] that matches the [certain words] in the given [text] and {highlight} the {words in the text}.`

const removeDuplicates = arr => [...new Set(arr)];

const regexpSquareBracket = /\[[^\]]*\]/gm;
const regexCurlyBracket = /\{[^\}]*\}/gm;

const squareBracketMatches = text.match(regexpSquareBracket);
const curlyBracketMatches = text.match(regexCurlyBracket);

for (const sq of removeDuplicates(squareBracketMatches)) 
  text = text.replaceAll(sq, `&lt;span class=&quot;highlight-bracket&quot;&gt;${sq}&lt;/span&gt;`)

for (const curly of removeDuplicates(curlyBracketMatches))
  text = text.replaceAll(curly, `&lt;span class=&quot;highlight-curly&quot;&gt;${curly}&lt;/span&gt;`)

console.log(text)

If the any of the brackets can be nested, sort the matches by longer string first.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何在可编辑的 div 中突出显示特定文本？

问题

答案1

如何防止在数组更新时重新渲染数组元素？