解析这段字符串'<h1>xx</h1><p>xx</p><td></td><u></u><ul></ul><b></b><li></li><ol></ol>'，将除了p、ul、ol、li、b、i、u的标签对都替换成p标签，但不需要替换以</开头的标签如</h>

解析后的字符串为:

'<h1>xx</h1><p>xx</p><td></td><u></u><ul></ul><b></b><li></li><ol></ol>'

替换后的字符串为:

'<p>xx</p><p>xx</p><p></p><u></u><ul></ul><b></b><li></li><ol></ol>'

相关问题

用js写出3种方法，解析这段字符串'<h1>xx</h1><p>xx</p><td></td><u></u><ul></ul><b></b><li></li><ol></ol>'，将除了p、ul、ol、li、b、i、u的标签对都替换成p标签，但不需要替换以</开头的标签如</h>

可以使用 JavaScript 中的正则表达式和字符串替换方法来实现这个功能。下面是三种不同的方法：

方法一：使用 replace 方法和正则表达式

const str = '<h1>xx</h1><p>xx</p><td></td><u></u><ul></ul><b></b><li></li><ol></ol>';
const replacedStr = str.replace(/<(?!\/?(p|ul|ol|li|b|i|u)\b)[^>]*>/gi, '<p>');
console.log(replacedStr);

方法二：使用 replace 方法和自定义替换函数

const str = '<h1>xx</h1><p>xx</p><td></td><u></u><ul></ul><b></b><li></li><ol></ol>';
const replacedStr = str.replace(/<[^>]*>/gi, (match) => {
  if (match.match(/<\/?(p|ul|ol|li|b|i|u)\b/)) {
    return match;
  }
  return '<p>';
});
console.log(replacedStr);

方法三：使用 DOM 解析和操作

const str = '<h1>xx</h1><p>xx</p><td></td><u></u><ul></ul><b></b><li></li><ol></ol>';

// 创建一个虚拟的 div 元素
const div = document.createElement('div');
div.innerHTML = str;

// 获取所有标签元素
const elements = div.getElementsByTagName('*');
for (let i = 0; i < elements.length; i++) {
  const tagName = elements[i].tagName.toLowerCase();
  if (!['p', 'ul', 'ol', 'li', 'b', 'i', 'u'].includes(tagName)) {
    const p = document.createElement('p');
    p.innerHTML = elements[i].innerHTML;
    elements[i].parentNode.replaceChild(p, elements[i]);
  }
}

const replacedStr = div.innerHTML;
console.log(replacedStr);

<div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <div class="book"> <div> <label for="id"> 编号： </label> <input type="text" id="id" v-model='id' :disabled="flag"> <label for="name"> 名称： </label> <input type="text" id="name" v-model='name'> <button @click='handle'>提交</button> </div> </div> </div> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr :key='item.id' v-for='item in books'> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td> <!--- 4.1 给修改按钮添加点击事件， 需要把当前的图书的id 传递过去 这样才知道需要修改的是哪一本书籍 ---> <a href="" @click.prevent='toEdit(item.id)'>修改</a > <span>|</span> <a href="" @click.prevent>删除</a > </td> </tr> </tbody> </table> </div> </div>用vue实现界面想要的图书信息修改，点击修改按钮后将编号传入编号输入栏并禁用，在图书名称输入栏进行名字的修改

可以先定义一个 data 属性，包括 books 数组、id 和 name 字符串、flag 布尔值：

data() {
  return {
    books: [
      { id: 1, name: 'book1', date: '2022-01-01' },
      { id: 2, name: 'book2', date: '2022-01-02' },
      { id: 3, name: 'book3', date: '2022-01-03' }
    ],
    id: '',
    name: '',
    flag: true
  }
}

然后在 toEdit 方法中，将传入的 id 赋值给 data 中的 id，并且将 flag 设为 true：

toEdit(id) {
  const book = this.books.find(item => item.id === id)
  this.id = book.id
  this.name = book.name
  this.flag = true
}

在模板中，使用 v-model 绑定输入框的值，并且根据 flag 的值控制编号输入框的禁用状态：

<label for="id"> 编号： </label>
<input type="text" id="id" v-model='id' :disabled="flag">
<label for="name"> 名称： </label>
<input type="text" id="name" v-model='name'>
<button @click='handle'>提交</button>

最后，在 handle 方法中，根据 id 找到对应的书籍并修改其名称，然后将 id 和 name 重置为空，并将 flag 设为 false：

handle() {
  const book = this.books.find(item => item.id === this.id)
  book.name = this.name
  this.id = ''
  this.name = ''
  this.flag = false
}