Как вставить ссылки в текст?

Question

[zekin375]

В JS вообще не чего не понимаю по этому не бейте сразу палками. Помогите пожалуйста.

Есть масив php $element;
[0] => Array
(
[ID] => 5335
[NAME] => провод
[DETAIL_PAGE_URL] => /provoda/
[TEGI] => провода;проводов;
)

Есть к примеру текст на странице:
Данный провод отлично подойдет для подключения проводов.

Требуется через js найти в тексте слова из массива NAME и TEGI если встретится соответствия проставить ссылки в текст, в итогде должно получится:

Данный провод отлично подойдет для подключения проводов.

Answer 1

[G F]

const items = [
  {
    id: 1,
    name: 'провод',
    url: 'provod',
    tags: ['провода', 'проводов']
  },
  {
    id: 2,
    name: 'робот',
    url: 'robot',
    tags: ['роботы', 'роботов']
  },
]

const element = document.querySelector('ТУТ') // здесь пишешь css-селектор элемента который хочешь изменить

element.innerHTML = element.textContent
  .split(/\s/)
  .map(word => {
      const matchedItem = items.find(item => [item.name, ...item.tags].includes(word)) 
      return matchedItem ? `<a href='${matchedItem.url}'>${word}</a>` : word
  })
  .join(' ')

Если внутри элемента не только текст, то с innerHTML будут проблемы.

Comments

[zekin375]

Как найти текст и подставить ссылку понял спасибо больше, если есть возможность можете пожалуйста привести пример на Js как разобрать ассоциативный массив php и проставлять нужные. Или может не url подставлять, а NAME трансформировать и вставлять в ссылки. (Пример: Плитка для пола = plitka-dlya-pola)

[G F]

zekin375, вот только этим могу помочь, я в пыхе не шарю Как передать из php в javascript массив?

[zekin375]

G F, Хрен с ним с php, решил упростить себе задачу. Просто в "const matchers =" передам все значения из php, я вот сижу уже 2 часа и не как не могу понять как мне из слова провод в href положить provod. То есть транслит положить.

[G F]

zekin375,
А у тебя как я понял не только провод, но и другие категории есть?

[zekin375]

G F, Расскажу что делаю. В Bitrix создал инфоблок с названиями элементов что то типа облако тегов или как подсказки на wikepedia. Получаю весь список элементов и на каждой статье если нахожу нужное мне слово на которое создан тег подкрепляется ссылка.

Адреса страниц идут строго из транслита ключевого слова

[G F]

zekin375, понял сейчас

[zekin375]

G F, спасай пожалуйста

[G F]

zekin375,

const items = [
{
	id: 1,
	name: 'провод',
	url: 'provod',
	tags: ['провода', 'проводов']
},
{
	id: 2,
	name: 'робот',
	url: 'robot',
	tags: ['роботы', 'роботов']
},
]

const result  = 'Данный провод отлично робот подойдет для подключения роботы проводов'
  .split(/\s/)
  .map(word => {
      const matchedItem = items.find(item => [item.name, ...item.tags].includes(word)) 
      return matchedItem ? `<a href='${matchedItem.url}'>${word}</a>` : word
  })
  .join(' ')

console.log(result)

[zekin375]

G F, Спасибо большое за код почти все работает. Но теперь такая ошибка что я в жизнь не разберусь. Почему то последнее слово в тексте не выделяется. Я тебя уже наверное достал, но глянь если не сложно.

[zekin375]

G F, Все нашел если пробел поставить после последнего слова все работает. Еще раз спасибо

[G F]

zekin375, поменял значение в методе split, чтобы оно учитывало не только пробелы но и прочие пустые значения, как энтеры, табы и т д.

[zekin375]

G F, Тысячу раз спасибо

Answer 2

[zkrvndm]

Используйте for() для перебора свойств объекта и replace() для замены слов на те же слова, но уже со ссылкой.