Добавляйте span для каждой буквы, но избегайте тегов html, используя javascript

Question

У меня есть строка

var string = "Selected<br>Works"

, из которой мне нужно обернуть каждую букву <span></span>, чтобы избежать наложения тега <br> в промежутке.Это возможно с регулярным выражением?

Я сделал это для:

'Selected<br>Works'.replace(/\S/g, '<span class="letter">$&</span>')

, который возвращает:

<span class="letter">S</span>
<span class="letter">e</span>
<span class="letter">l</span>
<span class="letter">e</span>
<span class="letter">c</span>
<span class="letter">t</span>
<span class="letter">e</span>
<span class="letter">d</span>
<span class="letter">&lt;</span>
<span class="letter">b</span>
<span class="letter">r</span>
<span class="letter">&gt;</span>
<span class="letter">W</span>
<span class="letter">o</span>
<span class="letter">r</span>
<span class="letter">k</span>
<span class="letter">s</span>

В то время как желаемый результат:

<span class="letter">S</span>
<span class="letter">e</span>
<span class="letter">l</span>
<span class="letter">e</span>
<span class="letter">c</span>
<span class="letter">t</span>
<span class="letter">e</span>
<span class="letter">d</span>
<br>
<span class="letter">W</span>
<span class="letter">o</span>
<span class="letter">r</span>
<span class="letter">k</span>
<span class="letter">s</span>

Другие примеры строк:

• Art Direction<br>Creative Concept<br>UX/UI Design

• Digital Branding<br>Website

Answer 1

Вы могли бы использовать replace с регулярным выражением вида упреждающего вида:

var string = "Selected<br>Works",
    result = string.replace(/(?![^<]*>)[^<]/g, c => `<span>${c}</span>\n`);

console.log(result);

При этом также будут пропущены другие теги, например <p> или </canvas>.Тем не менее, он не сможет справиться с более сложным HTML (включая скрипты, комментарии, ...), для которого регулярные выражения не подходят.

Answer 2

Вы можете разделить строку на <br> разделитель, который возвращает несколько массивов, содержащих буквы.Затем используйте .map() и .replace(), чтобы обернуть каждую букву в <span></span>.В конце соедините массивы по <br>

var string = "Selected<br>Works";
var newStr = string.split("<br>").map(function(val){
  return val.replace(/(\S)/g, "<span>$1</span>");
}).join("<br>");

console.log(newStr);
document.body.innerHTML = (newStr);

span:nth-child(even) {color: blue}
span:nth-child(odd) {color: red}