请教一下，如何用 js 合并连续的相同的 span

[shubei]

高 情 已 逐晓 云空

=>

高 情已 逐晓云空

[cyrbuzz]

@shubei

2s 是可接受范围吧，正常浏览网站，像是 bilibili, DOMContentLoad 也要 1s 左右。

[siweipancc]

两个栈与一个计数器。源数据全部入栈 1 ； 1 出栈做中间计数然后入 2 栈； 1 出栈与计数匹配则 2 出栈合并后入 2 栈不匹配则跳过，同时清空计数。
while 打上去。
结尾 2 栈整个导出来渲染。
效率不会很高。

[iPhone12]

可以只创建 dom ，不渲染。
再通过 dom 的 api 进行 siblings 、text 操作拿到 text 。

[iPhone12]

let temp = document.createElement('div')
temp.innerHTML = '题上 html 内容'

// example

let text = temp.getElementsByClassName('match')[0].innerText

[aguesuka]

首先使用 DOMParser 解析成 dom 树, 先序遍历元素, 如果前一个元素和后一个元素的 tag 和 attr 相同, 则将后一个元素的子元素都 append 到前一个元素中, 并删除后一个元素.

[2i2Re2PLMaDnghL]

同上，new DOMParser().parseFromString(str, 'text/html') ，用 DOM 操作改完之后再转回 html 插入
然后从根节点开始对 children 作两次循环，第一遍吸收 nextSibling ，第二遍递归下降调用自身

[autoxbc]

强行在 String 阶段处理，本质就是写了一个简陋的 DOM 解析器

[aguesuka]

简单地写了一下, 还可以继续优化, 不过这样应该够用了.

function isText(target, node) {
return target !== null && target.nodeType === Node.TEXT_NODE
&& node.nodeType === Node.TEXT_NODE
}

function shouldMerge(target, node) {
if (target === null) {
return false
}

return target.nodeType === Node.ELEMENT_NODE
&& node.nodeType === Node.ELEMENT_NODE
&& node.getAttribute('class') === target.getAttribute('class')
}

/**
* @param rootNode {Node}
*/
function mergeChildrenNodes(rootNode) {
if (!rootNode.hasChildNodes()) {
return;
}
let preChild = rootNode.firstChild;
const markToRemove = []
for (let i = 1; i < rootNode.childNodes.length; i++) {
const child = rootNode.childNodes[i];
if (isText(preChild, child)) {
preChild.textContent += child.textContent;
markToRemove.push(child);
} else if (shouldMerge(preChild, child)) {
child.childNodes.forEach(node => preChild.appendChild(node));
markToRemove.push(child);
} else {
preChild = child;
}
}
markToRemove.forEach(node => node.parentNode.removeChild(node));
for (const node of rootNode.childNodes) {
mergeChildrenNodes(node);
}
}

function test() {
const dom = new DOMParser().parseFromString(`<\span>高<\/span>
<\span class="del">情<\/span>
<\span class="del">已<\/span>
<\span class="match"><\span class="add">逐<\/span><\span class="add">晓<\/span><\/span>
<\span class="match"><\span>云</span><\span>空</span><\/span>`, 'text/html')
mergeChildrenNodes(dom)
const theSpanWitchClassIsDel = dom.lastChild.lastChild.childNodes[1];
console.info(theSpanWitchClassIsDel)
console.assert(theSpanWitchClassIsDel.getAttribute)
console.assert(theSpanWitchClassIsDel.textContent === '情已')
}

[shubei]

@aguesuka 学习了