I want to replace every <li> tag with # & every </li> with <br />
I think I need a global replace function for that rather than a simple string.replace() so...
var s=obj1.innerHTML;
s = s.replace(/<li>/g,"# ");
s = s.replace(/</li>/g,"<br/>");
But it doesn't seem to be working. Any mistake ?
EDIT: I am going to use the code in blogger & that is why it needs to be parsed.So that's why you see " instead of ".
Do this way:-
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);
.replace(/<p><br><\/p>/g, "<p></p>")Sorry but if the li tag has some attribute (like style) you will have text that you don't want. For me the simplest way is using regular expressions like this:
var regex = /(<li[^>]+>|<li>|<\/li>)/g;
s = s.replace(regex , ' ');
In the case you want to strip all the <tags> </tags> (not only li tags) you should do something like this:
var regex = /(<[^>]+>|<[^>]>|<\/[^>]>)/g;
s =s.replace(regex , ' ');
/(<li >|<li [^>]+>|<li>|<\/li>)/g already, with the first <li > ensuring tags with only a single additional space are replaced as well.obj1.innerHTML = obj1.innerHTML.replace(/<li>/g, '#').replace(/<\/li>/g, '<br>');
You just have to escape the / in /li otherwise it will be taken as a regex delimiter.
This works just fine:
<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>
or you can try and replace your second replace line with:
s.replace(/<\/li>/g,'<br/>');
Pretty late to the party, but all the previous answers are using RegExp(s) and you don't need Regular expressions to replace an HTML tag with another one:
Simple Example - Replace h1 with 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);
Answer to the question
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>NOTE: you should always have LI as children of UL.
So what you trying to achieve is not syntactically correct since according to W3C lists are made up of sequences of list items defined by the LI element.
If you can use jQuery, this would help you:
$("li").after("#<br/>").remove();
