replace split 替换拆分

最新推荐文章于 2024-01-23 13:19:33 发布

sunnyboysix

最新推荐文章于 2024-01-23 13:19:33 发布

阅读量439

点赞数

分类专栏：前端开发文章标签： html match

本文链接：https://blog.youkuaiyun.com/sunnyboysix/article/details/115549875

版权

前端开发专栏收录该内容

47 篇文章

订阅专栏

一业务场景

在一个字符串里面包含多个html标签,要拆开成单个渲染。

二代码

举一反三不仅仅是针对p 或者span标签

<script>

      let str = `
        <p>测试1</p>
        <p>测试2</p>
        <p>测试3</p>
        <p>测试4</p>
      `

      let str1 = `
        <span>测试1</span>
        <span>测试2</span>
        <span>测试3</span>
        <span>测试4</span>
      `
      let list = str.match(/<p[^>]*>(?:(?!<\/p>)[\s\S])*<\/p>/gi)
      let list1 = str1.match(/<span[^>]*>(?:(?!<\/span>)[\s\S])*<\/span>/gi)

      console.log(list)
      console.log(list1)

    </script>

split


<template>
  <div class="split">
    <div>{{ reStr }}</div>
    <div>{{ spStr }}</div>
  </div>
</template>

<script>
export default {
  name: 'split',
  data() {
    return {
      text: '1. 测试1; 2. 测试2; 3. 测试3; 4. 测试4',
      reStr: null,
      spStr: null,
    }
  },
  created() {
    this.replaceStr()
    this.split()
  },
  methods: {
    replaceStr() {
      this.reStr = this.text.replace(/;/g, "。")
      console.log(this.reStr)
    },
    split() {
      this.spStr = this.text.split(';')
      console.log(this.spStr)
    }
  }
}
</script>

replace

//原始字符串
var string = "欢迎访问!\r\nhangge.com    做最好的开发者知识平台";
 
//替换所有的换行符
string = string.replace(/\r\n/g,"<br>")
string = string.replace(/\n/g,"<br>");
 
//替换所有的空格（中文空格、英文空格都会被替换）
string = string.replace(/\s/g,"&nbsp;");
 
//输出转换后的字符串
console.log(string);


//原始字符串
var string = "欢迎访问!\r\nhangge.com    做最好的开发者知识平台";
 
//去掉所有的换行符
string = string.replace(/\r\n/g,"")
string = string.replace(/\n/g,"");
 
//去掉所有的空格（中文空格、英文空格都会被替换）
string = string.replace(/\s/g,"");
 
//输出转换后的字符串
console.log(string);

[...item.verbatim.match(/<p[^>]*>(?:(?!<\/p>)[\s\S])*<\/p>/gi)].map(item => item.replace(/<.*?>/ig,""))

let arr = str.split(/[ ]+/);//以空格分开

this.matchList.forEach((item) => {
        str = str.replace(new RegExp(item, 'g'), `<span style='color: #0067B2 '>${item}</span>`)
      })
      return str