vue v-html url,vue v-html 小sao操作

一图胜千语

前端使用 vue 实际开发过程中，v-html 你一定会觉得会很刺激，主要是方便​。

因为…… 实在是 so easy !

v-html 可以直接渲染富文本内容，当然也有存在不合理的情况：

比如：富文本内容 img 不存在可访问的 域名，这种情况在前端页面是不能显示 img。

怎么玩儿…… 前端也能这样玩儿

当然是往 img 的 src 最前面添加 可访问 域名

问题呈现：

解决问题code：

dataHTML(str) {

// 根据实际情况填写

let BASE_URL = "http://www.txGeekInfo.com"

/**

* 1、匹配出图片img标签(即匹配出所有图片)，过滤其他不需要的字符

* 2、从匹配出来的结果(img标签中)循环匹配出图片地址(即src属性)

* */

// 正则匹配图片(g 表示匹配所有结果，i 表示区分大小写)

let imgReg = /|\/>)/gi

​

// 正则匹配 src 属性

let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i

let arr = str.match(imgReg)

for (let i = 0, len = arr.length; i < len; i++) {

let src = arr[i].match(srcReg)

// 获取图片地址

if ( (src[1] != null) && (src[1].indexOf("http://") < 0) && (src[1].indexOf("https://") < 0) ) {

str = str.replace(src[1], BASE_URL + src[1])

}

}

return str

dataHTML(str) 中的 str 是调用 dataHTML 传入的实际数据

​

集成方法，哪里要用哪里调，爽歪歪……

运用方法：

indexOf

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

match()

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

replace()

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

此处省略以下6点 ……