let out = '
直接添加target属性

let out = '
然后在根目录下执行命令

$ npm run build

将生成的 marked.min.js 应用到项目中。之后再新添加的a标签都带着 target="_blank" 属性。
虽然添加上了，但是仔细想想这种方式和没优化之前并没有什么区别，只是一个新窗口，一个不新窗口。没办法进行控制是最痛苦的。要是能通过某种方式对这个属性进行控制，那就完美了。
使用！控制属性是否添加 要想能控制target属性，就要在[]()中使用某种符号进行标记。img标签对应的markdown的语法为![]()。借鉴img标签的语法，我把叹号放到中括号里面[!]来实现对target属性的控制。
要实现的效果如下

[迹忆客](https://www.jiyik.com) // 解析后为 https://www.jiyik.com">迹忆客[!迹忆客](https://www.jiyik.com) // 解析后为 https://www.jiyik.com" target="_blank">迹忆客

要实现这种效果，就不像上面一样了，直接全项目搜索 是没什么用的。这里我使用了WebStorm打开marked项目，然后利用上面的调试工具，追踪它的代码。
首先要在webstorm中配置markedJs，使其能够运行。首先新建 node.js 脚本运行

文章图片


新建成功之后，可以在代码中打上断点，运用webstorm的调试功能来追踪其代码。

当然这里不能在项目的入口文件就打断点，这样在追踪的过程中是很痛苦的，因为如果代码层级很深的话，容易走着走着就迷路了。

先读源码，在认为和解析a标签相关的地方打上断点。在读了源码之后，我是在 src/Tokenizer.js文件中的 link() 方法里打上的断点（在 474 行）

文章图片


经过追踪，最终跟到了src/Tokenizer.js中的outputLink()方法中，其实现如下：

function outputLink(cap, link, raw) { const href = https://www.it610.com/article/link.href; const title = link.title ? escape(link.title) : null; const text = cap[1].replace(/\([\[\]])/g,'$1'); if (cap[0].charAt(0) !== '!') { return { type: 'link', raw, href, title, text, }; } else { return { type: 'image', raw, href, title, text: escape(text) }; } }

代码中的 text 保存的就是 [迹忆客] 中的文本（迹忆客）。如果我们加上叹号，[!迹忆客]，那text的值为“!迹忆客”。这样我们就可以对text的文本做一个判断，如果第一个字母是叹号!，则就要将target的值设置为"_blank"。否则的话target就为空。然后在返回的对象中加上target属性。修改后的代码如下

function outputLink(cap, link, raw) { const href = https://www.it610.com/article/link.href; const title = link.title ? escape(link.title) : null; const text = cap[1].replace(/\([\[\]])/g,'$1'); if (cap[0].charAt(0) !== '!') { let a_text = text; let target = ""; if(a_text.charAt(0) === '!') { target = "_blank"; a_text = a_text.substring(1); // 这里将文本中的!去掉 } return { type: 'link', raw, href, title, text:a_text, target }; } else { return { type: 'image', raw, href, title, text: escape(text) }; } }

然后继续追踪代码，来到了我们第一种方法中暴力添加的地方 link() 方法。这里我们不再使用暴力了，因为我们现在有选择了，需要给link方法增加一个参数 target。

link(href, title, text, target) { href = https://www.it610.com/article/cleanUrl(this.options.sanitize, this.options.baseUrl, href); if (href === null) { return text; } let out =''; if(target !== "") { out = '; }else{ out = '; } if (title) { out += ' title="' + title + '"'; } out += '>' + text + ''; return out; }

然后我们继续找到调用link方法的地方—— src/Parser.js文件的第219行

文章图片


在link方法调用的地方将 target参数传过去

case 'link': { out += renderer.link(token.href, token.title, this.parseInline(token.tokens, renderer),token.target); break; }

到这里我们所有的代码就修改完成了，接下来就是编译项目，生成 marked.min.js 文件，在我的项目中使用了。
使用了一段时间，没有发现什么问题。但是总感觉这种方式不够彻底，当然不是说对于语法上不够彻底，而是对于代码上不够彻底。在匹配出text之后，还要对text的首字母进行判断，然后在截取字符串。效率上应该是有些不足（虽然实际情况没什么影响，但是毕竟要本着精益求精的态度不是吗，请允许我装一下）。还是应该继续优化代码，接下来就来到了终极的方法
究极大招，修改规则 即然不想从文本那里动手，那就要改变其匹配的规则。同样继续使用webstorm断点调试。可以发现对所有的标签匹配的规则如下

const inline = { escape: /^\\([!"#$%&'()*+,\-./:; <=>?@\[\]\\^_`{|}~])/, autolink: /^<(scheme:[^\s\x00-\x1f<>]*|email)>/, url: noopTest, tag: '^comment' + '|^' // self-closing tag + '|^', // CDATA section link: /^!?\[(label)\]\(\s*(href)(?:\s+(title))?\s*\)/, reflink: /^!?\[(label)\]\[(?!\s*\])((?:\\[\[\]]?|[^\[\]\\])+)\]/, nolink: /^!?\[(?!\s*\])((?:\[[^\[\]]*\]|\\[\[\]]|[^\[\]])*)\](?:\[\])?/, reflinkSearch: 'reflink|nolink(?!\\()', emStrong: { lDelim: /^(?:\*+(?:([punct_])|[^\s*]))|^_+(?:([punct*])|([^\s_]))/, //(1) and (2) can only be a Right Delimiter. (3) and (4) can only be Left.(5) and (6) can be either Left or Right. //() Skip other delimiter (1) #***(2) a***#, a***(3) #***a, ***a(4) ***#(5) #***#(6) a***a rDelimAst: /\_\_[^_]*?\*[^_]*?\_\_|[punct_](\*+)(?=[\s]|$)|[^punct*_\s](\*+)(?=[punct_\s]|$)|[punct_\s](\*+)(?=[^punct*_\s])|[\s](\*+)(?=[punct_])|[punct_](\*+)(?=[punct_])|[^punct*_\s](\*+)(?=[^punct*_\s])/, rDelimUnd: /\*\*[^*]*?\_[^*]*?\*\*|[punct*](\_+)(?=[\s]|$)|[^punct*_\s](\_+)(?=[punct*\s]|$)|[punct*\s](\_+)(?=[^punct*_\s])|[\s](\_+)(?=[punct*])|[punct*](\_+)(?=[punct*])/ // ^- Not allowed for _ }, code: /^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/, br: /^( {2,}|\\)\n(?!\s*$)/, del: noopTest, text: /^(`+|[^`])(?:(?= {2,}\n)|[\s\S]*?(?:(?=[\\

这里我们只关心link规则

link: /^!?\[(label)\]\(\s*(href)(?:\s+(title))?\s*\)/

原来你一开始就没有把我们可爱的target考虑进去，target一定不是亲生的。
即然你不要，那我们就自己动手将其加进去吧，修改规则如下

link: /^!?\[(target)(label)\]\(\s*(href)(?:\s+(title))?\s*\)/,

这还不够，像里面的 target、label、href和title这都是一个标记，来说明此处应该是什么。用这种正则去匹配也匹配不出什么东西来啊。下面肯定还藏着有东西呢。于是继续寻找，最终发现下面的代码

inline._label = /(?:\[(?:\\.|[^\[\]\\])*\]|\\.|`[^`]*`|[^\[\]\\`])*?/; inline._href = https://www.it610.com/<(?:\\.|[^\n<>\\])+>|[^\s\x00-\x1f]*/; inline._title = /"(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)/; inline.link = edit(inline.link) .replace('label', inline._label) .replace('href', inline._href) .replace('title', inline._title) .getRegex();

啊哈哈，这就对上了。这是为了防止一个这么长的正则不好阅读，所以才使用标记来进行说明，然后由程序自己来替换使用。还挺人性化的吗，这里给点个赞。
这就好办了，上面我们即然加上了target的标记，那这里我们也加个正则来匹配我们的叹号!

inline._target = /!?/; inline.link = edit(inline.link) .replace('target',inline._target) .replace('label', inline._label) .replace('href', inline._href) .replace('title', inline._title) .getRegex();

因为我要捕获匹配的结果，所以在上面target标记外面加了小括号(target) 。 这里是属于正则表达式的知识点了。所以说正则表达式还是很重要的，如果不了解正则那我们也就没有大招了。到了第二种方式也就停止了。看到这是不是有种想学习正则表达式的冲动了。点击学习正则表达式。
接下来我们要对在第二种方式中修改的 outputlink() 方法再次进行修改

function outputLink(cap, link, raw) { const href = https://www.it610.com/article/link.href; const title = link.title ? escape(link.title) : null; const text = cap[2].replace(/\([\[\]])/g,'$1'); const target = (cap[1].length == 1 && cap[1] === '!')?"_blank":""; if (cap[0].charAt(0) !== '!') { return { type: 'link', raw, href, title, text, target }; } else { return { type: 'image', raw, href, title, text: escape(text) }; } }

看起来，是不是变简单了呢。不过只是修改这里还是不行的，因为我们前面在正则中多加了一个捕获组，所以对于之前的text、href和title它们的分组索引都要加 1 才对。
要在哪里修改呢，这里继续往下寻找，又找到了一个link方法，但是这个link方法和之前加参数的 link 方法不同。该link方法是 src/Tokenizer.js 文件中定义的。

link(src) { const cap = this.rules.inline.link.exec(src); if (cap) { const trimmedUrl = cap[3].trim(); // 原先为 cap[2].trim() if (!this.options.pedantic && /^$/.test(trimmedUrl))) { return; }// ending angle bracket cannot be escaped const rtrimSlash = rtrim(trimmedUrl.slice(0, -1), '\\'); if ((trimmedUrl.length - rtrimSlash.length) % 2 === 0) { return; } } else { // find closing parenthesis // 原先为 const lastParenIndex = findClosingBracket(cap[2], '()') const lastParenIndex = findClosingBracket(cap[3], '()'); if (lastParenIndex > -1) { const start = cap[0].indexOf('!') === 0 ? 5 : 4; const linkLen = start + cap[1].length + lastParenIndex; // 原先为 cap[2] = cap[2].substring(0, lastParenIndex); cap[3] = cap[3].substring(0, lastParenIndex); cap[0] = cap[0].substring(0, linkLen).trim(); cap[4] = ''; // 原先为 cap[3] = ''; } } let href = https://www.it610.com/article/cap[3]; // 原先为 let href = cap[2]; let title =''; if (this.options.pedantic) { // split pedantic href and title const link = /^([^'"]*[^\s])\s+(['"])(.*)\2/.exec(href); if (link) { href = https://www.it610.com/article/link[1]; title = link[3]; } } else { // 原先为 title = cap[3] ? cap[3].slice(1, -1) :''; title = cap[4] ? cap[4].slice(1, -1) : ''; }href = https://www.it610.com/article/href.trim(); if (/^$/.test(trimmedUrl))) { // pedantic allows starting angle bracket without ending angle bracket href = https://www.it610.com/article/href.slice(1); } else { href = href.slice(1, -1); } } return outputLink(cap, { href: href ? href.replace(this.rules.inline._escapes,'$1') : href, title: title ? title.replace(this.rules.inline._escapes, '$1') : title }, cap[0]); } }

第二种方式中修改的其他地方的代码就不要再继续动了，保持在第二种方式中的修改即可。
到此终极大招放完了。使用命令编译生成 marked.min.js 文件就行了。

推荐阅读

• 

  同类色对比照片 摄影同类色
• 

  珂的意思和含义
• 

  聊城有哪些县 聊城都有哪些区县
• 

  为什么像汉字一样的象形文字很少,多数语言是拼音文字呢？
• 

  button的超级链接
• 

  支付宝商户如何开通花呗收款？花呗收钱开通的方法
• 

  画新娘妆和盘头多少钱，画一个新娘妆大概多少钱
• 

  坐飞机可以戴隐形眼镜吗？
• 

  茯苓绿豆粥——清热祛湿利尿消肿
• 

  嘉宝果泡酒多久可以喝
• 

  星巴克全职星级咖啡师面试难吗？
• 

  建筑软件,我的世界导入建筑软件
• 

  听书 安卓1.5,喜马拉雅蜻蜓fm懒人听书不错!
• 

  医保卡余额怎么用 医保卡余额使用技巧
• 

  iOS|iOS 碰撞角度矫正 及 applyImpulse 和 applyForce的区别
• 

  唇色发紫日常养护 嘴唇发黑是什么原因
• 

  为什么梦见打雪仗
• 

  榴莲一半硬一半软是什么原因
• 

  顾炀樊渊是哪部小说
• 

  梦见理发 你知道预示着什么吗

• 你到家了吗
• 闲杂“细雨”
• 杜月笙的口才
• 赢在人生六项精进二阶Day3复盘
• 祖母走了
• 樱花雨
• 眼观耳听美食的日子
• “成长”读书社群招募
• 眉头开了
• 涉毒患者(新诗)