var util = {};
util.getRichTextByHtml = function (html) {
var divEl= document.createElement('div');
divEl.innerHTML = html;
document.body.appendChild(divEl);
var iterator = document.createNodeIterator(divEl, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null, false);
var root = iterator.nextNode(); // root
var richText = [];
var style = {};
var text = '';
var node = iterator.nextNode();
var underlineNode = null,
lineThroughNode = null,
pNode = null;
while (node !== null) {
if (node.nodeType === 3 ) {
//是否为文字节点,例如 "这是一段文字"
text = node.nodeValue;
style = document.defaultView.getComputedStyle(node.parentElement, null); // 获取父容器的样式
if (underlineNode && underlineNode.contains(node) === false) { // 上一个下划线 u 节点是否包含当前node
underlineNode = null;
}
if (lineThroughNode && lineThroughNode.contains(node) === false) {// 上一个中划线strike 节点是否包含当前node
lineThroughNode = null;
}
if (pNode && this._getLastTextNode(pNode) === node && this._getLastTextNode(root) !== node) {
text = text + '\\r\\n';
pNode = null;
}
var richTextStyle = this._getRichStyle(style, underlineNode, lineThroughNode);
this._handleSuperAndSubScript(root, node, richTextStyle);
richText.push({
style: richTextStyle,
text: text
});
} else if (node.nodeName.toLowerCase() === 'p') {
pNode = node;
} else if (node.nodeName.toLowerCase() === 'u') {
underlineNode = node;
} else if (node.nodeName.toLowerCase() === 'strike') {
lineThroughNode = node;
} else if (node.tagName.toLocaleLowerCase() === 'br') {
pNode = node;
richText.push({
text: '\\r\\n'
});
}
node = iterator.nextNode();
}
document.body.removeChild(divEl);
// console.log(richText)
return richText;
}
util._getLastTextNode = function (root) {
if (root && root.nodeType === 1) {
var child = root.lastChild;
return this._getLastTextNode(child);
} else {
return root;
}
};
util._getRichStyle = function (style, isUnderlineNode, isLineThroughNode) { // getComputedStyle can't get inherit textDecoration
return {
font: (style.fontWeight === '700' ? 'bold ' : '') + (style.fontStyle === 'italic' ? 'italic ' : '') + style.fontSize + ' ' + style.fontFamily,
foreColor: style.color,
textDecoration: ((isUnderlineNode || style.textDecoration.indexOf('underline') > -1) ? 1 : 0) | ((isLineThroughNode || style.textDecoration.indexOf('line-through') > -1) ? 2 : 0)
};
};
util._handleSuperAndSubScript = function (root, node, style) {
if (root === node) {
return;
}
while (node.parentNode !== root) {
if (node.nodeName.toLowerCase() === 'sub') {
style.vertAlign = 2;
break;
}
if (node.nodeName.toLowerCase() === 'sup') {
style.vertAlign = 1;
break;
}
node = node.parentNode;
}
}
document.write(JSON.stringify(util.getRichTextByHtml('Helloworld'),'',4))
将
Helloworld
转化为
[
{
"style":{
"font":"16px "PingFang SC"",
"foreColor":"rgb(0, 0, 0)",
"textDecoration":0
},
"text":"Hello"
},
{
"style":{
"font":"bold 16px "PingFang SC"",
"foreColor":"rgb(0, 0, 0)",
"textDecoration":0
},
"text":"world"
}
]