Как сделать замену только для первой группы regExp?

Question

[gazes12]

Здравствуйте!

block.html().replace(new RegExp(`>(${letter})<`), '<span class="sr">$1</span>');

Нужно чтобы замена происходила только контента тегов - это то, что между круглых скобочек.

Огромное спасибо!

Comments

[Дмитрий]

Информации недостаточно для ответа
Распишите своими словами что вы хотите сделать и приведите пример

[gazes12]

Дмитрий, У меня есть html блок, я взял с него все слова, разбил слова на буквы, и каждую букву прокидываю в функцию, которая будет поочередно искать буквы в html блоке, и оборачивать каждую букву в тег span с определенным классом. Сейчас остановился на этапе поиска букв, не знаю как правильно составить регулярное выражение.

<div class="block">
  <p>Текст</p>
  <p>Слово</p>
  <p>Описание</p>
</div>

Должно сделаться:

<div class="block">
  <p>
    <span class="cls">Т</span>
    <span class="cls">е</span>
    <span class="cls">к</span>
    <span class="cls">с</span>
    <span class="cls">т</span>
  </p>
  <p>
    <span class="cls">С</span>
    <span class="cls">л</span>
    <span class="cls">о</span>
    <span class="cls">в</span>
    <span class="cls">о</span>
  </p>
  <p>
    <span class="cls">О</span>
    <span class="cls">п</span>
    <span class="cls">и</span>
    <span class="cls">с</span>
    <span class="cls">а</span>
    <span class="cls">н</span>
    <span class="cls">и</span>
    <span class="cls">е</span>
  </p>
</div>

[Дмитрий]

ясно, регулярки тут не лучший вариант в плане быстродействия
быстрее всего будет обратится к строке как к массиву

[gazes12]

Дмитрий, Я правильно понимаю, мне надо разбить html блок на массив, пройтись по этому массиву регулярным выражением, сделать замену букв, собрать массив обратно в исходное состояние(если так можно) и заменить старый html на новый?

[Дмитрий]

Я вас так понял что разбивку на слова вы уже сделали
Вот по каждому слову и пройтись циклом добавляя к временной переменной <span....>буква</span>
И заменить потом исходное слово содержимым временной переменной.

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

[gazes12]

Дмитрий, Так, в результате есть переменная, там содержится вот это:

"undefined<span class='cls'>Т<span/><span class='cls'>е<span/><span class='cls'>к<span/><span class='cls'>с<span/><span class='cls'>т<span/><span class='cls'>С<span/><span class='cls'>л<span/><span class='cls'>о<span/><span class='cls'>в<span/><span class='cls'>о<span/><span class='cls'>О<span/><span class='cls'>п<span/><span class='cls'>и<span/><span class='cls'>с<span/><span class='cls'>а<span/><span class='cls'>н<span/><span class='cls'>и<span/><span class='cls'>е<span/>"

Что же дальше использовать? Как поставить span`ы по своим местам, не используя регулярные выражения?

[Дмитрий]

Покажи код целиком что-ли, на каком нибудь codepen.io к примеру
Я ж не ясновидящий

[gazes12]

Дмитрий, https://codepen.io/gazes12/pen/LYrNRLj?editors=1111

[Дмитрий]

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

function addspan(word){
  let vari='';
let letters = word.split('');
  for(letter of letters) 
   vari += `<span class='cls'>${letter}<\/span>`;
  return vari;
  }  
  
  function textNodesUnder(node){
  var all = [];
  for (node=node.firstChild;node;node=node.nextSibling){
    if (node.nodeType==3) all.push(node);
    else all = all.concat(textNodesUnder(node));
  }
  return all;
}

nodes=textNodesUnder(document.querySelector('.block'));
nodes.forEach(node => {
tempnode=document.createElement("span");
tempnode.innerHTML=addspan(node.nodeValue);
node.parentElement.replaceChild(tempnode,node);
tempnode.outerHTML=tempnode.innerHTML;
});

Answer 1

[Aetae]

Во-первых: не работайте с html через регулярки.
Во-вторых: см. во-первых.
В-третьих: `(?<=>)(${letter})(?=<)`

Answer 2

[Дмитрий]

вот кривой код который делает почти то что нужно, дальше сам разбирайся

function addspan(word){
  let vari='';
let letters = word.split('');
  for(letter of letters) 
   vari += `<span class='cls'>${letter}<\/span>`;
  return vari;
  }  
  
  function textNodesUnder(node){
  var all = [];
  for (node=node.firstChild;node;node=node.nextSibling){
    if (node.nodeType==3) all.push(node);
    else all = all.concat(textNodesUnder(node));
  }
  return all;
}

nodes=textNodesUnder(document.querySelector('.block'));
nodes.forEach(node => {
tempnode=document.createElement("span");
tempnode.innerHTML=addspan(node.nodeValue);
node.parentElement.replaceChild(tempnode,node);
tempnode.outerHTML=tempnode.innerHTML;
});

Comments

[gazes12]

Дмитрий Благодарю)