Извлечение слова из строки, начинающейся с определенного слова, до конца

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(file:///C:/Users/user1/Desktop/svg.html#ac_clip_1/2/3...) из всего HTML на clip-path="url(#ac_clip_1/2/3..)

Любойбудет приветствоваться.

Answer 1

Мы можем использовать setAttribute в DOM.

getElementById

Мы можем использовать getElementById, если вы хотите сделать это на пути с определенным идентификатором.

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

getElementsByTagName

Более элегантное решение - использовать getElementsByTagName для их замены в случае, если ваша строка замены не уникальна.Если ваши пути клипа имеют инкрементные идентификаторы, вы можете использовать переменную index, указанную в foreach, для соответствующей манипуляции с URL-адресом замены.

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

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

Чтобы получить элементы с атрибутом, выполните .querySelectorAll('[clip-path]') для содержащего элемента.

Затем выполните цикл по всем элементам и выполните .replace(/^.*#/, '#') для всех значений атрибута пути-клипа.