代码之家 › 专栏 › 技术社区 › angel

如何使用javascript将markdown URL格式替换为功能性HTML等效格式?

markdown html javascript

angel · 技术社区 · 1 年前

事先很抱歉,如果以前有人问过这个问题,我环顾四周,找不到任何能回答我的问题或对我有用的东西

在我的HTML网页上,我有一个从外部源导入和打印文本的现有脚本。这个源代码是用markdown写的,所以它打印得很块状 [text](url) 而不是功能性显示 <a href="url">text</a>

我的目标是编写一个脚本,手动检测打印文本中的降价URL格式,并将其转换为功能HTML格式,这样它就不再打印长字符串的文本,并正确显示为超链接。该脚本应该运行之后导入外部文本,以便正确检测。

我承认我对javascript完全陌生,所以我一点也不熟悉,我在任何地方都找不到一个现有的脚本来做我想要的事情,所以我一直在尝试自己的弗兰肯斯坦,但它对我来说并不奏效。我很感激你的耐心,如果有人愿意带我了解它的工作原理,我也很感激!

我发现了一个 existing code on github 这完全是我想做的。我想修改它,以按类检测文本,而不是精确的文本,因为导入的文本是一个条件变量,会根据外部源进行更改。

我设法想出了这个,但我再次重申,我对javascript一无所知,我只是根据做相对相同事情的外部示例对其进行扩展?

    var prNs = document.getElementsByClassName('pk');
let elements = prNs.match(/\[.*?\)/g);
if( elements != null && elements.length > 0){
  for(el of elements){
    let txt = el.match(/\[(.*?)\]/)[1];//get only the txt
    let url = el.match(/\((.*?)\)/)[1];//get only the link
    prNs = prNs.replace(el,'<a href="'+url+'" target="_blank">'+txt+'</a>')
  }
}

1 回复 | 直到 1 年前

Mina 1 年前

您的代码有多个问题。

getElementsByClassName 返回类似数组的元素对象,因此如果有多个元素或只有一个元素,则需要循环通过 0
查找markdown链接的正则表达式是 /\[([^\]]+)\]\(([^)]+)\)/g
更新元素的方式不正确,您没有更新您更新的元素 innerHTML

var elements = document.getElementsByClassName('pk');

for (let i = 0; i < elements.length; i++) {
    let element = elements[i];
    let content = element.innerHTML;

    let markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;

    // Replace all Markdown links with HTML links in the content
    let updatedContent = content.replace(markdownLinkRegex, function(match, text, url) {
        return '<a href="' + url + '" target="_blank">' + text + '</a>';
    });

    element.innerHTML = updatedContent;
}

推荐文章