Извлечение слова из строки, начинающейся с определенного слова до конца
Мне нужно извлечь определенный атрибут из элемента HTML. Это элемент SVG, у которого в качестве атрибута есть clip-path. Мне нужно заменить clip-path, который идет с html, на мой собственный clip-path. Как я могу это сделать.
Мой внешний 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..)
Будем признательны за любые хедз-ап.
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
60
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Чтобы получить элементы с атрибутом, выполните .querySelectorAll('[clip-path]') для содержащего элемента.
Затем переберите все элементы и выполните .replace(/^.*#/, '#') для всех значений атрибутов clip-path.
Мы можем использовать setAttribute в DOM.
getElementById
Мы можем использовать getElementById, если вы хотите сделать это на пути с определенным идентификатором.
document.getElementById("68").setAttribute("clip-path", "url(#ac_clip_1/2/3..)");
getElementsByTagName
Более элегантным решением было бы использовать getElementsByTagName для их замены, если ваша строка замены не уникальна. Если ваши пути клипа имеют инкрементные идентификаторы, вы можете использовать индексную переменную, предоставленную в foreach, для соответствующего управления заменяющим URL.
var allPaths = document.getElementsByTagName("path");
allPaths.forEach(function(element, index){
element.setAttribute("clip-path", "url(#ac_clip_1/2/3..)");
});
Моя беда, я думал, что это только для элемента пути.
—
19.12.2018 09:10
Ответ принят как подходящий
Демо
Детали прокомментированы в демо
/*
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.info(`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>Здорово ! Спасибо!
—
19.12.2018 08:39
Нет проблем, удачного кодирования.
—
19.12.2018 08:47
Другие вопросы по теме
Специальная конструкция бирки H1
Таблица начальной загрузки Все столбцы не отображаются
Диалоги модели начальной загрузки на той же странице не работают
Как добавить теги скрипта, полученные в ответе AJAX
Застрял при увеличении даты в JavaScript
Флажок не обновляет SQL-запрос при нажатии кнопки с использованием PHP
Свойство данных HTML с несколькими значениями, фильтр
Загрузить файл и автоматически перейти на локальный для доступа
Смущает OnSubmit
Как увидеть результат или вывод данных, которые я использовал?
Похожие вопросы
Опция легенды уничтожает круговую диаграмму в Chart.js
Typescript: присвоение имени локальной переменной импортированному вложенному пространству имен
Реагируйте на вызов элемента внутри функции
Диалоги модели начальной загрузки на той же странице не работают
Обработка ошибок потока в конвейере - остановить предыдущий поток
Как добавить теги скрипта, полученные в ответе AJAX
Поиск уникальных значений в наборе записей
Как объединить многомерные массивы?
Застрял при увеличении даты в JavaScript
Удалить повторяющиеся имена в столбце
Спасибо, Арьян. но на самом деле может быть необязательно, чтобы тег появлялся только в «пути» SVG, это также может происходить непосредственно в теге <g>. Приносим извинения, поскольку это может быть неясно из моего примера кода.