使用JavaScript替换特定的HTML标签

Question

使用JavaScript替换特定的HTML标签

15

我想用#替换每个<li>标签，用<br />替换每个</li>标签。

我认为我需要一个全局替换函数来实现这个，而不仅仅是一个简单的string.replace()。

var s=obj1.innerHTML;

 s = s.replace(/<li>/g,&quot;# &quot;);
 s = s.replace(/</li>/g,&quot;<br/>&quot;);

但似乎它没有起作用。有什么错误吗？

编辑：我打算在博客中使用这段代码，所以需要解析。因此您会看到"而不是"。

- Sangram Nandkhile

6个回答

7

抱歉，如果li标签有一些属性（比如style），你将会得到一些不需要的文本。对于我来说，最简单的方法是使用正则表达式，就像这样：

var regex = /(<li[^>]+>|<li>|<\/li>)/g;
s = s.replace(regex , ' ');

如果您想删除所有的<tags> </tags>（不仅仅是li标签），您应该像这样做：

var regex = /(<[^>]+>|<[^>]>|<\/[^>]>)/g;
s =s.replace(regex , ' ');

- paulofer85

你可以使用这个正则表达式 /(<li [^>]+>|<li>|</li>)/g（加上空格）来解决问题。 - paulofer85

是的，我已经像这样修改了它 /(<li >|<li [^>]+>|<li>|<\/li>)/g，第一个 <li > 确保只有一个额外空格的标签也被替换。 - Mathijs Flietstra

6

obj1.innerHTML = obj1.innerHTML.replace(/<li>/g, '#').replace(/<\/li>/g, '<br>');

您只需对 /li 中的 / 进行转义，否则它将被认为是一个正则表达式分隔符。

- ziad-saab

1

这个完全正常运作：

<html>
<head>
    <script type="text/javascript" src="http://streamed.in/static/js/jquery-1.4.1.min.js"></script>
    <script>
    $(document).ready(function(){
        var s = $('#obj1').html();
        s = s.replace(/<li>/g,'#');
        s = s.replace(/<\/li>/g,'<br/>');
        $('#obj1').html(s);
    });
    </script>
</head>
<body id="obj1">
    <li>omg 1</li>
    <li>omg 2</li>
    <li>omg 3</li>
    <li>omg 4</li>
</body>
</html>

或者您可以尝试将第二个替换行替换为：

s.replace(/<\/li>/g,'<br/>');

- Дамян Станчев

0

虽然来晚了，但是之前的回答都使用了正则表达式，而实际上你不需要使用正则表达式来替换一个HTML标签为另一个标签：

简单示例 - 将h1替换为h2

const oldElement = document.querySelector('h1');

// Create a new element
const newElement = document.createElement('h2');
newElement.textContent = oldElement.textContent; // Copy content from old element to new one

// Replace old element with the new one
oldElement.parentNode.replaceChild(newElement, oldElement);

回答问题

function replaceLiTags() {
  const HTMLElementsLi = document.querySelectorAll('li');

  [...HTMLElementsLi].forEach(el => {
    el.parentNode.append("#" + el.textContent);
    el.parentNode.append(document.createElement('br'))
    el.remove();
  });
  
}

<ul>
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
</ul>

<button onclick="replaceLiTags()">replace tags</button>

注意：你应该始终将 LI 作为 UL 的子元素。所以你试图实现的语法不正确，因为根据 W3C 的规定，列表是由由 LI 元素定义的列表项序列组成的。

- GBra 4.669

-4

如果您能使用jQuery，那会对您有所帮助：

$("li").after("#<br/>").remove();

- papaiatis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Siva Charan · Accepted Answer

可以这样实现：

在线示例

var s="<div>hello world <br/><li>First LI</li><li>Second LI</li></div>";   
s = s.replace(/<li>/g, "#");  
s = s.replace(/<\/li>/g,"<br/>"); 
alert(s);