从一个字符串中提取一个单词，该字符串从一个特定单词开始直到结束

Question

我需要从HTML元素中提取一个特定的属性。这是一个SVG元素，它具有剪辑路径作为属性。我需要用我的自定义剪辑路径替换html附带的剪辑路径。我怎么能那样做。

我的外部HTML如下所示：

<div>
<svg xmlns="http://www.w3.org/2000/svg" border="0" width="1303" height="347"  role="presentation" style="display: block;">
<clipPath clip-rule="nonzero" id="ac_clip_1">
<path data-ac-wrapper-id="26" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<clipPath clip-rule="nonzero" id="ac_clip_2">
<path data-ac-wrapper-id="28" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<clipPath clip-rule="nonzero" id="ac_clip_3">
<path data-ac-wrapper-id="30" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<g data-ac-wrapper-id="23">
<path data-ac-wrapper-id="24" fill="transparent" stroke="none" d="M 0 0 L 1303 0 1303 0 1303 347 1303 347 0 347 0 347 0 0 0 0 Z">
</path>
</g>
<path id="68" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_1)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
<path id="69" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_2)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
....
</svg>
</div>

我想用clip-path="url(#ac_clip_1/2/3..)替换整个HTML中的clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_1/2/3...)

任何提醒都将不胜感激。

Answer 1

要检索具有属性的元素，请对包含的元素执行.querySelectorAll('[clip-path]')。

然后在所有元素上循环，并对所有剪辑路径属性值执行.replace(/^.*#/, '#')。

Answer 2

演示

演示中评论的详细信息

/*
Collect all <path>s -- that have the [clip-path] attribute that
has the value of "url" anywhere within it -- into a NodeList.
*/
var paths = document.querySelectorAll('path[clip-path*=url]');
/*
On each loop through the NodeList...
...use .setAttributeNS() to change the value of [clip-path]
attribute...
...and modify the value by incrementing the last char by index +1
*/
for (let i = 0; i < paths.length; i++) {
paths[i].setAttributeNS(null, 'clip-path', `url(#ac_clip_${(i + 1)})`);
console.log(`path#${paths[i].id}[clip-path="${ paths[i].getAttributeNS(null, 'clip-path')}"]`);
}

<p>Use Developer Tools to verify new [clip-path] values.</p>
<div>
<svg xmlns="http://www.w3.org/2000/svg" border="0" width="1303" height="347" role="presentation" style="display: block;">
<clipPath clip-rule="nonzero" id="ac_clip_1">
<path data-ac-wrapper-id="26" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<clipPath clip-rule="nonzero" id="ac_clip_2">
<path data-ac-wrapper-id="28" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<clipPath clip-rule="nonzero" id="ac_clip_3">
<path data-ac-wrapper-id="30" fill="none" stroke="black" d="M 96 10 L 1283 10 1283 295 96 295 96 10 Z"></path>
</clipPath>
<g data-ac-wrapper-id="23">
<path data-ac-wrapper-id="24" fill="transparent" stroke="none" d="M 0 0 L 1303 0 1303 0 1303 347 1303 347 0 347 0 347 0 0 0 0 Z">
</path>
</g>
<path id="68" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_1)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>
<path id="69" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_2)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>   
<path id="70" clip-path="url(file:///C:/Users/user1/Desktop/svg.html#ac_clip_3)" clipPathUnits="userSpaceOnUse" fill="none" stroke="none" d="M 0,0"></path>

</svg>
</div>

Answer 3

我们可以在DOM上使用setAttribute。

getElementById

如果您想在具有特定id的路径上执行此操作，我们可以使用getElementById。

document.getElementById("68").setAttribute("clip-path", "url(#ac_clip_1/2/3..)");

getElementsByTagName

一个更优雅的解决方案是使用getElementsByTagName来替换它们，以防替换字符串不是唯一的。如果剪辑路径具有增量id，则可以使用foreach中提供的索引变量来相应地操作替换URL。

var allPaths = document.getElementsByTagName("path");
allPaths.forEach(function(element, index){
element.setAttribute("clip-path", "url(#ac_clip_1/2/3..)");
});