使用 JavaScript 对单个字母进行 Kern（使用生成的内容）答案

【问题标题】：Kern Individual Letters With JavaScript (using Generated Content)使用 JavaScript 对单个字母进行 Kern（使用生成的内容）
【发布时间】：2020-02-15 17:05:36
【问题描述】：

我有一个使用 Wordpress 从数据库中生成的锚标记，并且客户端使用的字体的字距调整很差。我需要能够在锚链接上选择单个字母并将margin-right CSS 值添加到生成文本中的某些字母。

如何使用 Javascript 选择文本的第 2、第 3、第 4 个字母等，然后添加一个margin-right 值？我真的不知道从哪里开始？

var anchorTag = document.querySelectorAll(".taxonomy a");

注意 - 我无权访问 HTML，因此无法将字母包装在 span 元素等中。如果可能的话，我需要找到一种使用 JavaScript 选择单个字母的方法。

【问题讨论】：

如我演示的那样，如果不先包装它们，您就无法选择单个字符。包装完全使用 javascript 完成，因此您不需要任何特殊的“访问 HTML”。如果您可以将脚本注入页面，那么这就是您所需要的。

标签： javascript css selector

【解决方案1】：

您可以使用自定义类将每个字符包装在 span 元素中：

function wrapCharacters(element, prefix) {
  element.innerHTML = element.textContent
    .split('')
    .map(function(char, index) {
      return '<span class="' + (prefix || 'span') + '_' + index + '">' + char + '</span>';
    })
    .join('');
}

document.querySelectorAll('.taxonomy a').forEach(function(element) {
  wrapCharacters(element);
});

.taxonomy a .span_3 { margin-right: 1px; }
.taxonomy a .span_4 { margin-right: 3px; }
.taxonomy a .span_5 { margin-right: 3px; }
.taxonomy a .span_6 { margin-right: 7px; }

<div class="taxonomy">
   <a href="#">SampleText</a>
</div>

现在您可以像这样使用 CSS 访问单个字符：

.taxonomy a .span_0 { margin-right: 1px; }
.taxonomy a .span_1 { margin-right: 4px; }
.taxonomy a .span_2 { margin-right: 2px; }

ES6 版本

const wrapCharacters = (element, prefix) =>
  element.innerHTML = element.textContent
    .split('')
    .map((char, index) => `<span class="${prefix || 'span'}_${index}">${char}</span>`)
    .join('');

【讨论】：