JavaScript is required
Kotae
Touko
a year ago|views:72

HTML文本无效链接替换

首先定义匹配a标签img标签的正则表达式

// 匹配 a 标签和 img 标签
const aTagRegex = /<a[^>]*href=["']([^"']+)["'][^>]*>.*?<\/a>/g;
const imgTagRegex = /<img[^>]*src=["']([^"']+)["'][^>]*>/g;

链接有效检测方法,请求路径自定义

/**
 * 检测链接是否有效
 * @param {string} url 链接
 * @returns {Promise<boolean>}
 */
export const checkLink = async (url) => {
    try {
        const { pathname } = new URL(url);
        const response = await axios.head(`/download${pathname}`);
        return response.status >= 200 && response.status < 300;
    } catch (error) {
        return false;
    }
};

自定义异步文本替换方法

/**
 * 异步文本替换,String.replace 无法执行异步操作
 * @param string {String} 需替换的文本
 * @param regexp {RegExp} 正则表达式
 * @param replacerFunction {Function} 自定义替换方法
 * @returns {Promise<*>}
 */
async function replaceAsync(string, regexp, replacerFunction) {
    const replacements = await Promise.all(
        Array.from(string.matchAll(regexp),
            match => replacerFunction(...match)));
    let i = 0;
    return string.replace(regexp, () => replacements[i++]);
}

创建替换链接无效的HTML文本

/**
 * 替换链接无效的 HTML 文本
 * @param html
 * @returns {Promise<*>}
 */
const replaceInvalidTags = async (html) => {

    html = await replaceAsync(html, aTagRegex, async (match, href) => {
        const exists = await checkLink(href);
        return exists ? match : '<div class="font-bold text-red-700 flex items-center"><svg class="mx-1 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6567 14.8284L16.2425 13.4142L17.6567 12C19.2188 10.4379 19.2188 7.90524 17.6567 6.34314C16.0946 4.78105 13.5619 4.78105 11.9998 6.34314L10.5856 7.75736L9.17139 6.34314L10.5856 4.92893C12.9287 2.58578 16.7277 2.58578 19.0709 4.92893C21.414 7.27208 21.414 11.0711 19.0709 13.4142L17.6567 14.8284ZM14.8282 17.6569L13.414 19.0711C11.0709 21.4142 7.27189 21.4142 4.92875 19.0711C2.5856 16.7279 2.5856 12.9289 4.92875 10.5858L6.34296 9.17157L7.75717 10.5858L6.34296 12C4.78086 13.5621 4.78086 16.0948 6.34296 17.6569C7.90506 19.2189 10.4377 19.2189 11.9998 17.6569L13.414 16.2426L14.8282 17.6569ZM14.8282 7.75736L16.2425 9.17157L9.17139 16.2426L7.75717 14.8284L14.8282 7.75736Z"></path></svg>链接已失效</div>';
    });

    html = await replaceAsync(html, imgTagRegex, async (match, href) => {
        const exists = await checkLink(href);
        return exists ? match : '<div class="font-bold text-red-700 flex items-center"><svg class="mx-1 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2.9918 21C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918ZM20 15V5H4V19L14 9L20 15ZM20 17.8284L14 11.8284L6.82843 19H20V17.8284ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"></path></svg>图片已失效</div>';
    });

    return html;
};

tags:

JavaScript
String
1
comments:
hanTan 上海市南汇区 电信
12
02-24 10:25