纯文本中识别URI地址并转换成HTML
2020-12-13 03:04
阅读:338
YPE HTML>
标签:uri 正则 innertext 转义
问题
有一段纯文本text
, 欲将其插入DOM节点div
中. text
中可能有超链接, 邮件地址等. 如果有, 识别之.
分析
- 如果只是纯文本, 插入
div
中, 只要将div.innerText
设置为text
即可. -
text
中的URI地址可以用正则识别, 并将其替换为标签组成的字符串. 此时
text
变成了HTML字符串html
. - HTML字符串
html
可以赋值给div.innerHTML
. 但如果原text
中存在HTML语义的 字符串呢? 因此, 在识别URI之前, 需要将原text
作转义.
解决
uri-recognition.js
(function () { var trim = function (s) { /*jslint eqeq:true*/ if (s == null || s === ‘‘) { return ‘‘; } // s 空格 // 制表符 // xA0 non-breaking spaces // 3000中文空格 return String(s).replace(/^[s xA03000]+/, ‘‘). replace(/[s xA03000]+$/, ‘‘); }, startsWith = function (s, sub) { s = String(s); return s.indexOf(sub) === 0; }, test = function (str) { /*jslint maxlen: 100*/ var URI_REG = /(https?://|www.|ssh://|ftp://)[a-z0-9&_+-?/.=#]+/i, MAIL_REG = /[a-z0-9_+-.]+@[a-z0-9_+-.]+/i; str = trim(String(str)); return URI_REG.test(str) || MAIL_REG.test(str) || false; }, /** * @param {String} str * @param {Function} replacer */ replace = function (str, replacer) { /*jslint maxlen: 100*/ var URI_REG = /(https?://|www.|ssh://|ftp://)[a-z0-9&_+-?/.=#]+/gi, MAIL_REG = /[a-z0-9_+-.]+@[a-z0-9_+-.]+/gi; str = trim(String(str)); str = str.replace(URI_REG, function (match) { var newStr = replacer({ mail: false, fullURI: startsWith(match.toLowerCase(), ‘www.‘) ? (‘http://‘ + match) : match, match: match }); /*jslint eqeq: true*/ return newStr == null ? match : newStr; }); str = str.replace(MAIL_REG, function (match) { var newStr = replacer({ mail: true, fullURI: ‘mailto:‘ + match, match: match }); /*jslint eqeq: true*/ return newStr == null ? match : newStr; }); return str; }, uriRecognition = function (text) { var doc = document, html; text = trim(String(text)); if (test(text)) { //use {} to escape text = text.replace(/{}/g, ‘{{>}}‘). replace(/, ‘{/g, ‘{>}‘); html = replace(text, function (info) { if (!info || !info.match || !info.fullURI) { return null; } var link = doc.createElement(‘a‘); link.setAttribute(‘href‘, info.fullURI); /*jslint eqeq: true*/ if (link.innerText != null) { link.innerText = info.match; } else if (link.textContent != null) { link.textContent = info.match; } return link.outerHTML; }); html = html.replace(/{}/g, ‘>‘); return { content: html, isPlainText: false }; } return { content: text, isPlainText: true }; }, setContentWithURIRecognition = function (el, text) { var result = uriRecognition(text); if (!result) { return; } if (result.isPlainText) { if (el.innerText != null) { el.innerText = result.content; } else if (el.textContent != null) { el.textContent = result.content; } } else { el.innerHTML = result.content; } }; window.uriRecognition = uriRecognition; window.setContentWithURIRecognition = setContentWithURIRecognition; })();
test.html
uri regcognition
Chrome下测试OK.
纯文本中识别URI地址并转换成HTML,搜素材,soscw.com
纯文本中识别URI地址并转换成HTML
标签:uri 正则 innertext 转义
原文地址:http://blog.csdn.net/fudesign2008/article/details/25595083
下一篇:三.python高级
评论
亲,登录后才可以留言!