Question

我有一个存储在字符串中的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?**"

Answer 1

最好使用缓冲区并将其视为真正的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 = '';

Answer 2

这是不正则表达式的工作！这是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);

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

使用regex替换XML属性值

2 个答案: