splitText文本打散分离

The cloud

wishes

it were a bird

实现类似上面的文字动画,需要DOM中将文本打散分离成单个字符。可用的工具有jQuery的Lettering.js,GreenSock动画平台的SplitText等插件。这里是文本打散分离的原生JS实现。

const splitText = (el, options = {}) => {
const {
splitRegex,
tagName,
classPrefix
} = {
splitRegex: null,
tagName: 'span',
classPrefix: 'char',
...options
}

// 删除空的、合并相邻的文本节点
el.normalize()
let count = 1

const inject = el => {
const parentNode = el.parentNode
const str = el.nodeValue
const split = splitRegex ? str.split(splitRegex) : str
const l = split.length
let i = -1
while (++i < l) {
const node = document.createElement(tagName)
if (classPrefix) {
node.className = classPrefix + count
count++
}
node.appendChild(document.createTextNode(split[i]))
node.setAttribute('aria-hidden', 'true')
parentNode.insertBefore(node, el)
}
if (str.trim() !== '') {
// 无障碍
parentNode.setAttribute('aria-label', str)
}
parentNode.removeChild(el)
}

(function traverse(el) {
// el为文本节点
if (el.nodeType === 3) {
return inject(el)
}

const childNodes = [].slice.call(el.childNodes)
const l = childNodes.length

// el只有一个子文本节点
if (l === 1 && childNodes[0].nodeType === 3) {
return inject(childNodes[0])
}

// el有多个子文本节点
let i = -1
while (++i < l) {
traverse(childNodes[i])
}
}(el))
}

参考:https://github.com/yuanqing/charming