[英]Add span for each letter, but avoid html tags using javascript
我有一个字符串
var string = "Selected<br>Works"
我需要用<span></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"><</span>
<span class="letter">b</span>
<span class="letter">r</span>
<span class="letter">></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
您可以通过<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}
您可以使用replace
前瞻性的正则表达式:
var string = "Selected<br>Works", result = string.replace(/(?![^<]*>)[^<]/g, c => `<span>${c}</span>\\n`); console.log(result);
这也将跳过其他标签,如<p>
或</canvas>
。 尽管如此,它还是无法应对更复杂的HTML(包括脚本,注释......),而正则表达式并不适用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.