mixone
Version:
MixOne is a Node scaffolding tool implemented based on Vite, used for compiling HTML5, JavasCript, Vue, React and other codes. It supports packaging Web applications with multiple HTML entry points (BS architecture) and desktop installation packages (CS a
97 lines (89 loc) • 5.12 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div><a onclick='adf(event)' href="/" >超链接1</a>
<script>
function adf(){
console.log('e')
console.log(event)
console.log(event.target)
event.preventDefault();
return false
}
const generateUniqueId = (href) => {
// 添加时间戳和随机数确保唯一性
const timestamp = Date.now();
const random = Math.floor(Math.random() * 10000);
const uniqueString = href + timestamp + random;
// 简单哈希函数
let hash = 0;
for (let i = 0; i < uniqueString.length; i++) {
const char = uniqueString.charCodeAt(i);
hash = ((hash << 5) - hash) + char;
hash = hash & hash; // 转换为32位整数
}
// 确保为正数并转换为36进制
const hashStr = Math.abs(hash).toString(36);
// 以字母开头，确保唯一性
const letters = 'abcdefghijklmnopqrstuvwxyz';
const firstLetter = letters[Math.abs(hash) % 26];
// 添加时间戳后缀确保绝对唯一性，控制总长度在15以内
const timestampSuffix = (timestamp % 10000).toString(36);
const id = firstLetter + hashStr.slice(0, 8) + timestampSuffix;
return id.slice(0, 15); // 确保长度不超过15
}
function replaceAtagV2(content) {
const aTagRegex = /<a\s+([^>]*?)>[\s\S]*?<\/a>/g;
let match;
while ((match = aTagRegex.exec(content)) !== null) {
console.log(match);
const fullMatch = match[0];
const attributes = match[1];
// 提取href属性
const hrefMatch = attributes.match(/href\s*=\s*['"]([^'"]*)['"]/);
const href = hrefMatch ? hrefMatch[1] : null;
// 提取native-target属性
const nativeTargetMatch = attributes.match(/native-target\s*=\s*['"]([^'"]*)['"]/);
const nativeTarget = nativeTargetMatch ? nativeTargetMatch[1] : null;
// 提取onclick属性
const onclickMatch = attributes.match(/onclick\s*=\s*(['"])([\s\S]*?)\1/);
const onclickQuote = onclickMatch ? onclickMatch[1] : null;
const onclickContent = onclickMatch ? onclickMatch[2] : null;
console.log('find a tag, href:', href, 'native-target:', nativeTarget, 'onclick:', onclickContent);
if (!href) continue; // 如果没有href属性，跳过此标签
if (nativeTarget==null) continue; // 如果没有native-target属性，跳过此标签
const id = generateUniqueId(href);
let funcQuote = onclickQuote === null ? `'` : (onclickQuote == `'` ? `"` : `'`);
//查找是否有onclick
let newOnclickContent = `autoHref(${funcQuote}${id}${funcQuote},${funcQuote}${href}${funcQuote});` + (onclickContent===null ? '' : onclickContent);
let replaceVal = fullMatch;
if(onclickContent === null){//原来无onclick，需要增加onclick
replaceVal = `<a onclick="${newOnclickContent}"` + replaceVal.substring(2);
} else {//原来有，需要替换
replaceVal = replaceVal.replace(onclickContent, newOnclickContent);
}
if(nativeTarget == ''){
replaceVal = replaceVal.replace(nativeTargetMatch[0], 'native-target="_window"');
}
replaceVal = replaceVal.replace(/ href\s*=\s*['"][^'"]*['"]/g, '');
replaceVal = `<a data-a-id="${id}"` + replaceVal.substring(2);
content = content.replace(
fullMatch,
replaceVal
);
}
return content
}
console.log(replaceAtagV2(`<div><a native-target="" href="/" onclick='alert("")' >超链接2</a><a href="#" onclick='alert("")' native-target="_blank">超链接2</a><a native-target="" href="#" >超链接2</a></div>`))
// console.log(replaceAtagV2(`<div><a onclick='alert("")' href="#1" >超链接1</a><a onclick='alert("")' native-target="" href="#2" >超链接2</a></div><div><a href="#3" onclick='alert("")' >超链接212</a></div><div><a href="#4">超链接212</a></div>`))
// console.log(replaceAtagV2(`<div><a href="#" onclick="" >超链接2</a></div>`))
// console.log(replaceAtagV2(`<div><a onclick="" href="#" >超链接2</a></div>`))
// console.log(replaceAtagV2(`<div><a href="#" >超链接2</a></div>`))
</script>
</body>
</html>