Question

我们说我有一个像这样的字符串：

const sentence = "This is my custom string";

我想在这句话中突出显示输入字段的单词。

让我们说一个说用户键入一个字符串，然后我将单独的单词转换成一个数组，如下所示：

["custom", "string", "is"]

我知道想要用我的数组中突出显示的单词替换我的句子中的单词。对于一个单词我会做这样的事情：

const word = 'custom';

const searchFor = new RegExp(`(${word})`, 'gi');
const replaceWith = '<strong class="highlight">$1</strong>';

const highlightedSentence = sentence.replace(searchFor, replaceWith);

如何将此逻辑与数组应用于整个句子？

我不能简单地遍历它，因为字符串将包含我突出显示的类，它也将被带入突出显示过程，第二个循环，第三个循环等。

这意味着在第二个循环中，如果用户在哪里键入：

"high custom"

我会突出显示我突出显示的课程，从而突出开头。

我的意思是尝试评论/取消注释2个荧光笔功能：

https://jsfiddle.net/qh9ttvp2/1/

Answer 1

你的问题是，在替换单词时，你用.class'highlight'替换已经添加的html标签。

这里的解决方案可能是替换任何不是html标签的东西。在你的jsfiddle例子中替换这一行。

const searchFor = new RegExp(`(${word})(?!([^<]+)?>)`, 'gi');

Answer 2

您可以将句子拆分为数组并检查您的元素是否已突出显示：

let sentence = "This is a some type of long string with all kinds of words in it, all kinds.";
let sentenceArr = sentence.split(' '); // make an array 
const query = "kinds words all type";

function highlighter(query, sentence) {
  const words = query.match(/\S+/g);

  words.forEach((word) => {
      // Create a capture group since we are searching case insensitive.
      const searchFor = new RegExp(`(${word})`, 'gi');
      const replaceWith = '<strong class="highlight">$1</strong>';
      sentenceArr = sentenceArr.map(sw => (sw.indexOf('strong class="highlight"') === -1) ? sw.replace(searchFor, replaceWith) : sw); // if already highlited - skip
      //sentence = sentence.replace(searchFor, replaceWith);
  });
  
  // console.log(sentence);

  document.querySelector('.highlighted-sentence').innerHTML = sentenceArr.join(' '); // notice sentenceArr
}

// Works.
//highlighter('kinds words all type', sentence);

// Doesn't work.
highlighter('kinds words high', sentence);

<div class="highlighted-sentence"></div>

使用string.replace应用字符串数组

2 个答案: