Replacing XML attribute values using regex

Question

I have an svg stored in a string. A part of it looks like:

var str = '<svg version="1.1" width="1400px">';

I'm looking for a solution that will replace the value of any given property. Right now, if I wanted to change the width, I'm doing the following:

var prop = "width";
var newValue = "100px";
var regex = new RegExp(prop + '="[^"]*');
str = str.replace(regex, prop + '="' + newValue);

Is there any way to do this with a single regular expression so that I dont have to build a string afterwards?

Or put differently, what is a regular expression that will select only the text between quotes when preceded by a specific string?

fill="**howCanISelectThisText?**"

I dont want to use an xml parser because I am encoding this as a data uri with I include in a css file. Its pointlessly heavy. — Jim Hall
– Jim Hall, Commented Apr 18, 2013 at 15:38
Yea, it worked in Reggy when I tested it. What do you know, it wasnt on POSIX. — Jim Hall
– Jim Hall, Commented Apr 18, 2013 at 15:48

user1467267 · Accepted Answer · 2013-04-18 15:21:58Z

4

Better to use a buffer and treat it as a real HTML object;

JSfiddle

HTML

<div id="hidden"></div>

CSS

#hidden {
    display: none; 
}

JavaScript

var hidden = document.getElementById('hidden');
var str = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" fill="#ffffff"  width="1400px" height="180px" viewBox="0 0 1400 180" enable-background="new 0 0 1400 180" xml:space="preserve">';
hidden.innerHTML = str;

var prop = "width";
var newValue = "100px";

var svgObject = hidden.getElementsByTagName('svg')[0];
svgObject.setAttribute(prop, newValue)

console.log(svgObject.getAttribute('width'));

// Done
str = hidden.innerHTML;

// When you're done, empty hidden buffer
hidden.innerHTML = '';

answered Apr 18, 2013 at 15:21

user1467267

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

2 Comments

Alex K. Over a year ago

+1 was just going to post this but with an in-memory element; var el = document.createElement("div"); el.innerHTML = str + "</svg>"; and el.firstChild.getAttribute...

user1467267 Over a year ago

Virtual might work just as well yes :). I like having a visual reference sometimes tho. Can always virtualize that DOM-element of course.

gen_Eric · Accepted Answer · 2013-04-18 15:32:43Z

This is not a job for a regex! This is a job for an XML parser. All "modern" browsers (this means IE 9+) should have one built-in. It's called DOMParser.

_{Docs: https://developer.mozilla.org/en-US/docs/Parsing_and_serializing_XML}

It's very simple to use, even easier than Regexes! Here's an example:

var str = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" fill="#ffffff"  width="1400px" height="180px" viewBox="0 0 1400 180" enable-background="new 0 0 1400 180" xml:space="preserve">';

var parser = new DOMParser;
var serializer = new XMLSerializer;

// Your string doesn't have a close tag, it won't parse without one
var doc = parser.parseFromString(str+'</svg>', 'application/xml');

doc.documentElement.setAttribute('width', '100px');

// The serializer will self-close the element, let's remove that
str = serializer.serializeToString(doc).replace('/>', '>');

console.log(str);

DEMO: http://jsfiddle.net/qpu33/

Collectives™ on Stack Overflow

Replacing XML attribute values using regex

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related