La expresión regular JS obtiene la conversión entre atributos de etiquetas img, etiquetas img y etiquetas span.

Utilice la escena del proyecto:
1、需要将图片标签替换成span标签.
2、通过正则提取特定标签中的属性.


Cómo usar (escritura Vue3):

Use el método de reemplazo regular y devuelva un valor específico a través de la función de devolución de llamada

1. Extraer atributos en etiquetas específicas a través de la regularización

src="(.*?)" 中的 .?* 代表了非贪婪匹配, 这里指的是提取src后面的内容
gi修饰符中g代表了全局匹配、i代表了忽略大小写
回调函数中的参数根据使用分组符()来

 /* 分割提取img标签的属性值 依次提取 src、 alt、 href */
    let reg = /<img src="(.*?)" alt="(.*?)" href="(.*?)"[\"|\']?\s.*?>/gi 
    /* 通过回调函数取得信息,将问题一一替换 */
    let value = richHtml.value?.replace(
      reg,
      /* match, url, alt, href, index 名称可以随意起*/
      (match, url, alt, href, index) => {
    
    
        console.log(match, 'match匹配到整个img标签')
        console.log(url, 'url地址')
        console.log(alt, 'alt信息')
        console.log(href, 'href信息')
        console.log(index, '找到的索引位置') 
        return match
      }
    )

resultado de la operación

inserte la descripción de la imagen aquí

2. Reemplace la etiqueta

src="(.*?)" 中的 .?* 代表了非贪婪匹配, 这里指的是提取src后面的内容
gi修饰符中g代表了全局匹配、i代表了忽略大小写
回调函数中的参数 根据使用分组符()来

  // 将img标签替换成span标签
 let reg = /<img src="(.*?)" alt="(.*?)" href="(.*?)"[\"|\']?\s.*?>/gi 
 let value = richHtml.value?.replace(
   reg,
   /* match, url, alt, href, index 名称可以随意起*/
   (match, url, alt, href, index) => {
    
    
      console.log(match, 'match匹配到整个img标签')
      console.log(url, 'url地址')
      console.log(alt, 'alt信息')
      console.log(href, 'href信息')
      console.log(index, '找到的索引位置') 
      return `<img id='imgEl' src=${
      
      url}></span>`
    }
  )

  // 将span标签替换成img标签
  let reg = /<span>(.*?)<\/span>/gi
  let value = richHtml.value?.replace(reg, (url) => {
    
    
     return `<span id='imgEl'>${
      
      url}</span>`
  })

fin

Fuente de inspiración:
Acceso regular de JS a HTML todos los enlaces img](https://www.cnblogs.com/webqiand/p/16628304.html)
Primeros pasos con expresiones regulares: coincidencia no codiciosa

Si hay alguna forma de mejorar la escritura, ¡bienvenido a corregirme!

Supongo que te gusta

Origin blog.csdn.net/weixin_45331887/article/details/128736239
Recomendado
Clasificación