Как вытащить из строки с html-тегами некоторые данные из атрибутов?

Question

[Амир]

Входные данные, строка вида:

Здравствуйте, <span class="a612353adjddv__AS" data-target="id_customer">продавец</span>! Мы хотим с Вами заключить <span class="bbasfaAFADFAFV_SD" data-target="id_option">договор</span>. Как Вы на это смотрите,  <span id="some_id" class="a612353adjddv__AS" data-target="id_customer">продавец</span>?

На выходе должно получиться:

Здравствуйте, %id_customer%! Мы хотим с Вами заключить %id_option%. Как Вы на это смотрите, %id_customer%?

Т.е., необходимо как-то вычленить data-target-ы из строки и удалить теги. Эти data-targets конечны и известны. Но вся загвоздка у меня заключается в том, что классы у span всегда разные, и внутри тегов может быть масса и других атрибутов, и простыми replace я не смогу обойтись.
Какое есть универсальное решение?

Comments

[Надим]

Здесь не нужны регулярки вообще, используйте DOMParser и банальный querySelector!

Answer 1

[Карлиндоу Мэрлифи]

$(document).ready(function() { //jquery
      let value = $('.a612353adjddv__AS[data-target]') // берёшь значение data-target из класса
      $('.a612353adjddv__AS').html(value); // подставляешь его 
      $('.a612353adjddv__AS').removeAttribute('data-target'); // удаляешь атрибут
});

Comments

[Амир]

Ну, во-первых, классы генерятся всегда разные (в теме я это описал). Во-вторых, мне нужно вставить не внутрь span data-target, а удалить span и вместо него поставить data-target, обрамленные %.
Ну и в-третьих, jquery не подходит.

[Алексей Уколов]

Амир, ну, во-первых, уберите из селекторов классы, оставьте только атрибуты. Во-вторых, с полученными значениями вы можете делать что хотите, модифицировав пример из ответа. Заодно можете и от jQuery избавиться. А тех. задания выполняют на https://freelance.habr.com.

[Амир]

Алексей Уколов, ну во-первых, я тут не готовое решение требую, а направление. Человек направил меня не в ту сторону.
Во-вторых, если бы я знал, как убрать из селекторов весь мусор, вопросов бы было гораздо меньше. Но мне кажется, опять это приведет меня не туда.
Я ищу здесь направление и подсказки, а не "сделайте за меня". Я новичок, и вполне вероятно, решение лежит на поверхности, но я даже не знаю, куда копать. Строгость модератора тут ни к чему, уважаемый.

[Алексей Уколов]

В том-то и дело, что требовать тут не надо ни решение, ни направление. Человек потратил своё время, а вы ему вместо спасибо или уточняющих вопросов, выкатили ТЗ.

Answer 2

[Aleksandr Kritskii]

Ну вот решение

https://codepen.io/kritskii-a/pen/VwPqzbj

Comments

[Амир]

Не получается.
Пожалуйста, помогите.

[Aleksandr Kritskii]

Амир, https://codepen.io/kritskii-a/pen/VwPqMmy

Answer 3

[fallus]

Я не эксперт в регулярках, но по крайне мере задача так решиться может:

const x  = 'Здравствуйте, <span class="a612353adjddv__AS" data-target="id_customer">продавец</span>! Мы хотим с Вами заключить <span class="bbasfaAFADFAFV_SD" data-target="id_option">договор</span>. Как Вы на это смотрите,  <span id="some_id" class="a612353adjddv__AS" data-target="id_customer">продавец</span>'

let dataTargetValues = []

x.replace(/data-target=([\\"\\'])(.*?)\1/g, current => dataTargetValues.push(current.replace(/data-target=/, '').replace(/["']/g, '')))

console.log(dataTargetValues)

И дубликаты удалить, если надо:

dataTargetValues = Array.from(new Set(dataTargetValues))

Comments

[Алексей Уколов]

Так можно получить значения из атрибутов, да. Но вот заменить теги будет очень проблематично. Регулярки для такой задачи вообще очень плохо подходят.

[fallus]

Алексей Уколов,

Т.е. необходимо как то вычленить data-target-ы из строки и удалить теги.

Если нужно сделать только это, то тогда так :)

const x  = 'Здравствуйте, <span class="a612353adjddv__AS" data-target="id_customer">продавец</span>! Мы хотим с Вами заключить <span class="bbasfaAFADFAFV_SD" data-target="id_option">договор</span>. Как Вы на это смотрите,  <span id="some_id" class="a612353adjddv__AS" data-target="id_customer">продавец</span>'

let dataTargetValues = []

const stringWithoutTags = x
.replace(/data-target=([\\"\\'])(.*?)\1/g, current => dataTargetValues.push(current.replace(/data-target=/, '').replace(/["']/g, '')))
.replace(/<[^>]*>/g, '')

dataTargetValues = Array.from(new Set(dataTargetValues))

console.log(stringWithoutTags)
console.log(dataTargetValues)

[Алексей Уколов]

Автор вопроса же показал пример, что он хочет получить, ваш код такой результат не даёт.
Код нормальный - просто инструмент для задачи плохо подходит.

[fallus]

Алексей Уколов, действительно. Утренняя невнимательность.

const x  = 'Здравствуйте, <span class="a612353adjddv__AS" data-target="id_customer">продавец</span>! Мы хотим с Вами заключить <span class="bbasfaAFADFAFV_SD" data-target="id_option">договор</span>. Как Вы на это смотрите,  <span id="some_id" class="a612353adjddv__AS" data-target="id_customer">продавец</span>'

const stringWithoutTags = x.replace(/<[^>]*>/g, current => {
    const dataTargetAttr = current.match(/data-target=([\\"\\'])(.*?)\1/)
    if(dataTargetAttr){
        return dataTargetAttr[0].replace(/["']/g, '').replace(/data-target=/, '') + ' '
    }
    return ''
})

console.log(stringWithoutTags)

[fallus]

Правда если будут тэги без data-target, им будет хреново.
Но их всегда можно прописать пустыми.