Сопоставление нескольких подстрок со строкой

Question

У меня есть приложение, в котором пользователь вводит текст, затем этот текст отправляется на сервер и возвращает массив слов, содержащих этот текст.

Но, как вы видите, проблема начинается, когда есть более 1 совпадение. Вот мой текущий код:

state.input !== '' && vocabularyItems && (vocabularyItems.map((vocabularyItem, index) => {
      const regex = new RegExp(input, 'gi');
      const results = vocabularyItem.matchAll(regex);

      const tmp = [];
      console.log(vocabularyItem);
      for (const match of results) {
        console.log(match);
        let currentLoop = vocabularyItem.slice(0, match.index);

        currentLoop += '<strong className="tt-highlight">';

        currentLoop += vocabularyItem.slice(match.index, match.index + input.length);

        currentLoop += '</strong>';

        currentLoop += vocabularyItem.slice(match.index + input.length, vocabularyItem.length);

        tmp.push(currentLoop);
      }
      console.table(tmp);

      return (
        <div
          id={index}
          className={`override-strong tt-suggestion tt-selectable ${cursor === index && 'tt-cursor'}`}
          onMouseDown={handleClick}
          key={index}
          dangerouslySetInnerHTML={{ __html: tmp }}
        />
      );
    }))

и вот несколько примеров в HTML code

1.
<strong className="tt-highlight">En</strong>kelkind

2.
<strong className="tt-highlight">En</strong>gagement
Engagem<strong className="tt-highlight">en</strong>t

, как вы можете видеть, он работает, когда есть только один случай, но дублирует слово, когда присутствует более одного совпадения. Как я могу получить что-то вроде

<strong>en</strong>gagem<strong>en</strong>t?

ru gagem en t?

Я забыл добавить, что мне нужен чехол сохраняется

Answer 1

Прежде всего, я бы порекомендовал использовать что-то вроде:

const results = vocabularyItems.filter(word => word.toLowerCase().includes(input.toLowerCase()))

для поиска словаря без учета регистра.

Далее я бы выделил совпадение немного по-другому. Я бы разделил предложенную опцию на части (совпадающие с поисковыми и несоответствующими), а затем отформатировал их соответственно:

const parts = suggestion.split(new RegExp(`(?=${match})|(?<=${match})`, 'gi'))
...
parts.map((part,key) => {
          const style = part.toLowerCase() == match.toLowerCase() ? 'bold' : 'normal'
          return <span style={{fontWeight:style}} {...{key}}>{part}</span>
        })

Я думаю, что достаточно безопасно предположить, что вы создаете автозаполнение поискового ввода, таким образом, вы можете Найдите использование быстрой демонстрации ниже (исключая все стили):

//dependencies
const { render } = ReactDOM,
      { useState } = React

//vocabulary      
const vocabulary = ['engagement', 'Bentley', 'English', 'seven', 'Engagement']

//suggested option component
const SuggestedOption = ({suggestion, match}) => {
  const parts = suggestion.split(new RegExp(`(?=${match})|(?<=${match})`, 'gi'))
  return (
    <div>
      {
        parts.map((part,key) => {
          const style = part.toLowerCase() == match.toLowerCase() ? 'bold' : 'normal'
          return <span style={{fontWeight:style}} {...{key}}>{part}</span>
        })
      }
    </div>
  )
}

//autocomplete component
const SearchBar = () => {
  const [suggestions, setSuggestions] = useState([]),
        [inputValue, setInputValue] = useState(''),
        onInput = input => {
          setInputValue(input)
          setSuggestions(vocabulary.filter(word => input.length && word.toLowerCase().includes(input.toLowerCase())))
        }
  return (
    <div>
      <input onKeyUp={e => onInput(e.target.value)} />
      <div >
        {
          suggestions.map((suggestion,key) => <SuggestedOption {...{key,suggestion,match:inputValue}} />)
        }
      </div>
    </div>
  )
}

render(
  <SearchBar />,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

Answer 2

Вот способ сделать это с string.replace:

const list = [
  'end',
  'England',
  'engagement'
]

const boldify = (search) => {
  return (string) =>
    string.replace(new RegExp(search, 'gi'), '<strong>$&</strong>')
}
  

document.body.innerHTML = list.map(boldify('en')).join('<br>')

---

РЕДАКТИРОВАТЬ: После нескольких раз подумав и увидев принятый ответ, я захотел попробовать sh версию ванили JS иметь что-то более полное. И более того, версия React показалась мне запоздалой, эта быстрее!

Быстрее, потому что:

• она использует ваниль JavaScript
• использует правильные манипуляции с домом (нет innerHTML)

'use strict'

const list = [
  'end',
  'England',
  'engagement',
  'Ken Bogard',
  'Venom',
  'Engagement'
]

const boldify = (search) => {
  return (string) => {
  	const div = document.createElement('div')
  	const parts = string.split(new RegExp(`(?=${search})|(?<=${search})`, 'gi'))
    div.append(
      ...parts.map(part => {
    	  if (part.toUpperCase() !== search.toUpperCase()) return part
      
        const strong = document.createElement('strong')
        strong.innerText = part
        return strong
      })
    )
    return div
  }
}

const contains = (search) => {
  search = search.toUpperCase()
  return (string) => string.toUpperCase().indexOf(search) >= 0
}

const refreshSuggestions = () => {
  // Fast removal of children.
  while (suggestions.firstChild) suggestions.removeChild(suggestions.firstChild)

  // nothing to do
  if (searchInput.value.length == 0) return
  
  const newSuggestions =
    list.filter(contains(searchInput.value))
        .map(boldify(searchInput.value))
  suggestions.append(...newSuggestions)
}

searchInput.addEventListener('input', refreshSuggestions)

<input id="searchInput" list="suggestions">
<div id="suggestions">
</div>

Answer 3

РЕДАКТИРОВАТЬ - ответ Евгения намного лучше, чем этот.

Простое l oop может достичь этого, если я правильно понимаю, что вы хотите:

var array = ["end","engagement","Engagement","england","enough","not this","or this"];

function filterArray(array, id) {
    var returnArray = [];
  for (var i = 0; i < array.length; i++) {
    value = array[i];
    if (value.includes(id)) {
        returnArray.push(value);
    }
    }
    return returnArray;
}

var filteredArray = filterArray(array,"en");
console.log(filteredArray);

Если вы хотите обеспечить дубликаты (когда случай на Engagement приводит к дублированию), вы можете установить строковую строку в нижнем регистре перед передачей в массив, и проверьте массив на наличие строки перед повторным нажатием.