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 = /<img.*?(?:>|\/>)/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点 ……