0

我有一个 svg 存储在一个字符串中。它的一部分看起来像：

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

我正在寻找一种解决方案来替换任何给定属性的值。现在，如果我想更改width，我正在执行以下操作：

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

有没有办法用一个正则表达式来做到这一点，这样我就不必在之后构建一个字符串？

或者换一种说法，什么是正则表达式，当前面有一个特定的字符串时，它只会选择引号之间的文本？

fill="**howCanISelectThisText?**"

4

2 回答 2

4

最好使用缓冲区并将其视为真正的 HTML 对象；

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 = '';
于 2013-04-18T15:21:58.440 回答
3

这不是正则表达式的工作！这是 XML 解析器的工作。所有“现代”浏览器（这意味着 IE 9+）都应该内置一个。它被称为DOMParser。

文档：https ://developer.mozilla.org/en-US/docs/Parsing_and_serializing_XML

它使用起来非常简单，甚至比正则表达式更容易！这是一个例子：

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);

演示：http: //jsfiddle.net/qpu33/

于 2013-04-18T15:24:42.580 回答