How to replace a specific tag content in javascript

Question

I have a string, that may or may not be valid HTML, but it should contain a Title tag.
I want to replace the content of the title with new content.

Example 1:

lorem yada yada <title>Foo</title> ipsum yada yada

Should turn into:

lorem yada yada <title>Bar</title> ipsum yada yada

Example 2:

lorem yada yada <title attributeName="value">Foo</title> ipsum yada yada

Should turn into:

lorem yada yada <title attributeName="value">Bar</title> ipsum yada yada

I don't want to parse html with regex - just replace the title tag... Please don't send me here...

EDIT: After numerous down votes and a lot of patronizing attitude -
I am aware (as admitted in the original post) that usually Regex is not the way to handle HTML. I am open to any solution that will solve my problem, but till now every JQuery / DOM solution did not work. Being "right" is not enough.

@HackedByChinese - No. As I mentioned in the question, I have a string that may not be html. — seldary
– seldary, Commented Jun 19, 2012 at 11:39
document.getElementsByTagName("head")[0].getElementsByTagName("title")[0].innerHTML="Bar"; — Alexandre Khoury
– Alexandre Khoury, Commented Jun 19, 2012 at 11:40
@seldary I understand that. That fact would not restrict jQuery as an option. — moribvndvs
– moribvndvs, Commented Jun 19, 2012 at 11:41
I'm not editing the page i'm running in! I have a string that the user inputs and I want to manipulate it... — seldary
– seldary, Commented Jun 19, 2012 at 11:42

Qtax · Accepted Answer · 2012-06-19 12:03:19Z

5

It's difficult to do such a thing reliably with regex (read: "will not work for all cases"), thus using some kind of proper parser is best if possible.

That said, here is a simple expression that would work for your examples:

var re = /(<title\b[^>]*>)[^<>]*(<\/title>)/i;
str = str.replace(re, "$1Bar$2");

Some things that this does not handle and will not work right with: comments, quotes, CDATA, etc.

answered Jun 19, 2012 at 12:03

Qtax

34k9 gold badges92 silver badges127 bronze badges

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

Comments

Esailija · Accepted Answer · 2012-06-19 12:18:40Z

4

function replaceTitle( str, replacement ) {
    var tmp = document.createElement("ihatechrome");
    tmp.innerHTML = str;
    tmp.getElementsByTagName("title")[0].innerHTML = replacement;
    return tmp.innerHTML;   
}

replaceTitle( "lorem yada yada <title>Foo</title> ipsum yada yada", "Bar" );
//"lorem yada yada <title>Bar</title> ipsum yada yada"

For some reason, google chrome makes requests if there are img tags with src. Doesn't make any sense but that's what happens.

Edit:

This seems to work in chrome (does not load images):

var doc = document.implementation.createHTMLDocument("");

doc.body.innerHTML = "<img src='/'>";

doc.body.innerHTML; //"<img src="/">"

edited Jun 19, 2012 at 12:18

answered Jun 19, 2012 at 11:36

Esailija

140k24 gold badges280 silver badges328 bronze badges

6 Comments

Qtax Over a year ago

Won't this execute any <script>s or load images that may be present in the string?

seldary Over a year ago

And will there be any chance that text other than the title's inner text will be changed? even slightly?

Esailija Over a year ago

It will load images but not execute scripts or style tags

seldary Over a year ago

@Esailija - This is why I thought of regex... I don't want any side effects. just to replace the string.

Esailija Over a year ago

@seldary fine, so use a regex then

|

tobyodavies · Accepted Answer · 2012-06-20 05:11:53Z

0

Please god don't try and parse html with a regex (I know you said you aren't parsing it, but you are...) jQuery has a perfectly good set of primitives to manipulate html that isn't in the DOM:

var htmlishString = "almost <title>HTML</title>";
var $fakeDiv = jQuery('<div />');
$fakeDiv.html(htmlishString).find('title').text('Bar');
var manipulatedString = $fakeDiv.html()

http://jsfiddle.net/4kQkx/

edited Jun 20, 2012 at 5:11

answered Jun 19, 2012 at 23:17

tobyodavies

28.2k5 gold badges45 silver badges58 bronze badges

7 Comments

seldary Over a year ago

Have you tested this? the third line is throwing "Uncaught TypeError: Cannot read property 'slice' of undefined".

tobyodavies Over a year ago

@seldary it works in chrome, but i did not test in any other browser

seldary Over a year ago

It crashed with this: view-source:blogs.msdn.com/b/ericlippert/archive/2012/06/18/…

tobyodavies Over a year ago

it also works in FF. Not sure I understand the relevance of that link

tobyodavies Over a year ago

admittedly this also appears to suffer the fetching scripts bug in chrome

|

Collectives™ on Stack Overflow

How to replace a specific tag content in javascript

3 Answers 3

Comments

6 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related