Замена символа во всём тексте

Question

Необходимо каждую из ковычек обернут в span с классом.

Например, есть текст:

<p>“Всем привет” сказал он.</p>

На выходе надо получить:

<p><span class="left-q">“</span>Всем привет<span class="right-q">”</span> сказал он.</p>

Пробовал делать вот так, но заменяет только первый найденный символ + оборачивает в span 2 раза почему-то.

let textBlock = document.getElementsByClassName('text_block')[0]; //Тут весь текст с параграфами хранится
textBlock.innerHTML = textBlock.innerHTML.replace('“', '<span class="left-q">“</span>');

Answer 1

let textBlock = document.getElementsByClassName('text_block')[0]; //Тут весь текст с параграфами хранится
textBlock.innerHTML = textBlock.innerHTML.replace(/“/g, '<span class="left-q">“</span>'.replace(/”/g, '<span class="right-q">”</span>');

var str = '<p>“Всем привет” сказал он.</p><p>“Всем привет” сказал он.</p><p>“Всем привет” сказал он.</p><p>“Всем привет” сказал он.</p><p>“Всем привет” сказал он.</p><p>“Всем привет” сказал он.</p>';

console.log(str.replace(/“/g, '<span class="left-q">“</span>').replace(/”/g, '<span class="right-q">”</span>'));

Answer 2

Используем флаг глобального (множественного) поиска /g
Делим текст на 3 группы:
1. ” открывающая кавычка
2. текст в кавычках не содержащий кавычки
3. ” закрывающая кавычка
Подставляем вместо кавычек (группы 1 и 3) конструкции которые нам нужны:

<span class=\"left-q\">“<\/span> и <span class=\"right-q\">“<\/span>
текст вставляем через ссылку на 2-ю группу \$2:

// константы для лучшей читаемости кода
const leftReplace = `<span class="left-q">“</span>`
const rightReplace = `<span class="right-q">“</span>`
const pattern = new RegExp("([“])([^”]*)([”])", "g")

// получаем элемент
let textBlock = document.getElementsByClassName('text_block')[0]; 
// делаем замену
textBlock.innerHTML = textBlock.innerHTML
  .replace(pattern, `${leftReplace}\$2${rightReplace}`);

.left-q{
  background: coral;
}
.right-q{
  background: lightblue;
}

<div class="text_block">
  <p>“Всем привет” сказал он. “Всем привет” повторил он.</p>
  <p>“Всем пока” сказал он.</p>
</div>

Этот скрипт будет полезен если кавычки будут одинаковыми например " или ' в остальных случаях при большом количестве замен наблюдаются просадки по скорости

Answer 3

const replacements = {
  "“": <span className="lq">“</span>,
  "”": <span className="rq">”</span>,
}

function App({ text }) {
  return (
    <p>
      {text.split(/([“”])/).map(x => replacements[x] || x)}
    </p>
  )
}

ReactDOM.render(
  <App text="“Всем привет” сказал он." />,
  document.querySelector('main')
)

main { font-size: 2em; }
.lq { color: red; }
.rq { color: lime; }

<script src="//unpkg.com/react@17/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<main></main>

БЛОГ НА HUSL

Замена символа во всём тексте

Ответы (3 шт):