用户:RedDragon/Test1:修订间差异
来自Rizline中文维基
更多操作
小 |
小 |
||
| 第139行: | 第139行: | ||
<script> | <script> | ||
document.addEventListener('DOMContentLoaded', addColorBorders) | document.addEventListener('DOMContentLoaded', addColorBorders) | ||
const hexColorRegex = /#([A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})\b/g | const hexColorRegex = /#([A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})\b/g | ||
| 第150行: | 第150行: | ||
) | ) | ||
const | const nodesToProcess = [] | ||
let node | let node | ||
while (node = walker.nextNode()) { | while (node = walker.nextNode()) { | ||
if (node.parentNode.nodeName === 'SCRIPT' || node.parentNode.nodeName === 'STYLE') continue | |||
const testRegex = new RegExp(hexColorRegex.source, 'g') | |||
if (testRegex.test(node.textContent)) { | |||
nodesToProcess.push(node) | |||
} | |||
} | } | ||
nodesToProcess.forEach(textNode => { | |||
const parent = textNode.parentNode | const parent = textNode.parentNode | ||
const text = textNode.textContent | const text = textNode.textContent | ||
const matches = [...text.matchAll(hexColorRegex)] | const matches = [...text.matchAll(hexColorRegex)] | ||
const fragment = document.createDocumentFragment() | |||
let lastIndex = 0 | |||
matches.forEach(match => { | |||
const [hexColor, index] = [match[0], match.index] | |||
if (index > lastIndex) { | |||
fragment.appendChild(document.createTextNode(text.substring(lastIndex, index))) | |||
} | |||
const colorSpan = document.createElement('span') | |||
Object.assign(colorSpan.style, { | |||
display: 'inline-block', | |||
padding: '0', | |||
margin: '0', | |||
border: '4px solid', | |||
borderRadius: '0', | |||
fontWeight: 'bold', | |||
background: 'transparent', | |||
lineHeight: '1', | |||
verticalAlign: 'baseline', | |||
boxSizing: 'border-box', | |||
width: 'fit-content', | |||
letterSpacing: '0' | |||
}) | |||
colorSpan.textContent = hexColor | |||
colorSpan.style.borderColor = hexColor | |||
fragment.appendChild(colorSpan) | |||
lastIndex = index + hexColor.length | |||
}) | |||
if (lastIndex < text.length) { | |||
fragment.appendChild(document.createTextNode(text.substring(lastIndex))) | |||
} | |||
parent.replaceChild(fragment, textNode) | |||
if ( | let tdParent = parent | ||
while (tdParent) { | |||
if (tdParent.nodeType === Node.ELEMENT_NODE) { | |||
if (tdParent.tagName === 'TD') { | |||
if (new RegExp(hexColorRegex.source, 'g').test(tdParent.textContent)) { | |||
tdParent.style.padding = '0' | |||
break | |||
} | |||
} | |||
} | } | ||
tdParent = tdParent.parentNode | |||
} | } | ||
}) | }) | ||
2025年10月28日 (二) 20:02的版本
|
Rizline Original[1]
详细信息
|
|||||||||||||||||||||||||||
User:RedDragon/Test User:RedDragon/Test1 User:RedDragon/Test2