Replacing Text without losing inner tags using Javascript

Question

Let suppose I have a string:

var firstString = "<h3>askhaks</h3><h3>1212</h3><h1 style='color:red;
text-decoration:underline;'><a href=''><span id='123'><i class='fa fa-inr'></i> 
</span> Hello! Admin</span></a></h1><p>This is the content of page 'String 
Replace in Javascript'</p><h1>First</h1><span><h1>Hello! Admin</h1>Thank You for 
visiting this page</span><h1>Third</h1>";

I want to change text of first <h1> tag without losing all other inner tags i.e. <a href=''><span id='123'><i class='fa fa-inr'></i> </span>

Just want to replace Hello! Admin with another text. I am able to replace text of first <h1> tag with the below code without losing the inline styling added to <h1> but I am loosing the inner tags.

var innerText = document.getElementsByTagName('h1')[0].innerHTML;

How to achieve this?

Er, by document.getElementsByTagName('h1') it seems like you have an element in a document, not just a string? Which is it? — CertainPerformance
– CertainPerformance, Commented Jul 27, 2018 at 5:20
I am trying to create code just be inserting it in the document. Actually I want to achieve this in ckeditor. — Akshit Ahuja
– Akshit Ahuja, Commented Jul 27, 2018 at 5:22
if you want to manipulate the DOM, the parts you want to manipulate must be addressable ("selectable"). Plain old text is not selectable. Enclose your text in a tag such as <span id="h1-test">Hello! Admin</span, then you can retrieve it and modify it to your heart's content. — user9315861
– user9315861, Commented Jul 27, 2018 at 5:56
@torazaburo Well, plain text is selectable using DOM traversal and checking to see if a node is a text node, but yeah, it's probably not something one should do if one can avoid it. — CertainPerformance
– CertainPerformance, Commented Jul 27, 2018 at 5:57
@CertainPerformance You are indeed right, and if you wrote an answer using that technique it'd be far and above the best one yet. Actually, though, the same question has been answered about 100 times already, so if you have more time to spend on this question, why not find the best dup and mark it as such. — user9315861
– user9315861, Commented Jul 27, 2018 at 5:59

CertainPerformance · Accepted Answer · 2018-07-27 05:27:49Z

3

If you want to change the text before inserting it into the document, you can use DOMParser on the input HTML string, get its trimmed textContent, and then replace the substring in the input with your desired string, thus preserving all HTML tags:

var firstString = "<h3>askhaks</h3><h3>1212</h3><h1 style='color:red;text-decoration:underline;'><a href=''><span id='123'><i class='fa fa-inr'></i></span> Hello! Admin</span></a></h1><p>This is the content of page 'String Replace in Javascript'</p><h1>First</h1><span><h1>Second</h1>Thank You for visiting this page</span><h1>Third</h1>";
const doc = new DOMParser().parseFromString(firstString, 'text/html');
const h1Text = doc.querySelector('h1').textContent.trim();
console.log(firstString.replace(h1Text, 'foo bar new string'));

answered Jul 27, 2018 at 5:27

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Akshit Ahuja Over a year ago

Yes, your code will work fine but what if the same text is available in any other line also.

CertainPerformance Over a year ago

If you want to replace that text wherever it appears as well, you can use a global regex replace.

Akshit Ahuja Over a year ago

You are not getting my point, if the same text is available in the firstString variable, then it will also get replaced. But I don't want it to get replaced.

CertainPerformance Over a year ago

Do you mean you want the firstString variable to remain as is? Then the code works as desired - strings are immutable. .replace returns a new string, it doesn't change the existing string.

user9315861 Over a year ago

This won't work if the text content is spread around in between different tags. The .textContent will be all the concatenated pieces of text, and the replace won't be able to find them.

|

Vyoma Shah · Accepted Answer · 2018-07-27 05:36:00Z

0

document.getElementsByTagName("h1").innerHTML = "Hello!";

answered Jul 27, 2018 at 5:36

Vyoma Shah

52 bronze badges

Comments

Charles Assuncao · Accepted Answer · 2018-07-27 06:08:29Z

0

If it’s not in the DOM and it’s a string you can use a regex in a replace like:

str.replace(“(<h1>)(.+)(<\/h1>)”, “$1YOUR_NEW_TEXT$2”);

answered Jul 27, 2018 at 6:08

Charles Assuncao

5883 silver badges11 bronze badges

Collectives™ on Stack Overflow

Replacing Text without losing inner tags using Javascript

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related