Блог

У меня есть строка, и я хотел бы добавить теги span только к алфавитам с помощью тега aria-label. Конечный результат будет опасно отображаться в React. Пожалуйста, дайте совет. Это то, что у меня есть.

 const str = `D = (C - B) / B`;

const addAriaLabels = (str) => {
  function alphaOnly(a) {
    var b = '';
    for (var i = 0; i < a.length; i  ) {
      if (a[i] >= 'A' amp;amp; a[i] <= 'z') b  = a[i];
    }
    return b;
  }
  return alphaOnly(str).split('').map(item => `<span aria-label='column ${item}'>${item}</span>`).join('')
}

console.log(addAriaLabels(str))  

Ожидаемый результат:

<span aria-label='column D'>D</span> = (<span aria-label='column C'>C</span> - <span aria-label='column B'>B</span>) / <span aria-label='column B'>B</span>

Я не уверен, как добавить обратно сами символы.

Пример:

Если строка является A, результат должен быть <span aria-label="column A">A</span> .

Если строка равна D = (C — B) / B, результат должен быть <span aria-label='column D'>D</span> = (<span aria-label='column C'>C</span> - <span aria-label='column B'>B</span>) / <span aria-label='column B'>B</span>

Вам не нужно dangerouslySetInnerHTML для этого.

Объяснение:

• Регулярное выражение /([a-z] )/i соответствует всем подстрокам из 1 или более букв латинского алфавита без учета регистра.

• String#split с помощью группы захвата регулярных выражений ( /(...)/ ) включает захваченный текст в результаты с нечетными индексами. Например, 'baba'.split(/(b)/) дает вам ["", "b", "a", "b", "a"] .

  Получив эти результаты, вы можете сопоставить захваченные результаты с нечетным индексом ( idx % 2 ) с span элементами, а четные — с React.Fragment s.

addAriaLabels теперь возвращает массив компонентов React, которые могут быть отображены непосредственно внутри родительского элемента.

 const addAriaLabels = str =>
  str.split(/([a-z] )/i)
    .map((substr, idx) => idx % 2
      ? <span key={idx} aria-label={`column ${substr}`}>{substr}</span>
      : <React.Fragment key={idx}>{substr}</React.Fragment>)

const Parent = () => {
  const str = `D = (C - B) / B`

  return (
    <>
      {addAriaLabels(str)}
    </>
  )
}
  

Выполните итерацию по символам строки, если текущий символ является алфавитом, добавьте к нему эти теги, затем назначьте его уже определенной строке, иначе просто назначьте символ :

 const originalStr = `D = (C - B) / B`

function addAriaLabels(str) {
  let newStr = ''
  for (let i = 0; i < str.length; i  ) {
    if (str[i].match(/[A-Z]/g) amp;amp; str[i].match(/[A-Z]/g).length > 0) {
      newStr  = `<span aria-label='column ${str[i]}'>${str[i]}</span>`
    } else {
      newStr  = str[i]
    }

  }

  return newStr;
}

console.log(addAriaLabels(originalStr))