URL фильтра для всего между <p></p>, где <h2></h2> = значение - PullRequest
Новая
       0

URL фильтра для всего между <p></p>, где <h2></h2> = значение

0 голосов
/ 25 июня 2018

Можно ли создать URL-фильтр (www.website.com?filter=value), где пользователь может вводить данные в теге <h2>?

Пример: 

<p>
<h2>THIS</h2>
<div>information</div>
<h5>other info</h5>
<h2>THAT</h2>
<div>information2</div>
<h5>other info2</h5>
</p>

И чтобы получить один раздел html, пользователь должен ввести что-то похожее на www.website.com?h2=THIS и только вернуться: 

<h2>THIS</h2>
<div>information</div>
<h5>other info</h5>

1 Ответ

0 голосов
/ 25 июня 2018

Да, это возможно. Вам понадобится Javascript для его достижения. 

//Array of the elements you are wanting
const sections = [
  {
		title: 'THIS',
    info1: 'information',
    info2: 'other info'
  },
  {
  	title: 'THAT',
    info1: 'information2',
    info2: 'other info2'
  }
]

//getting the URL and the parameters
var url_string = "http://www.website.com?h2=THIS"; //Can get this with window.location.href
var url = new URL(url_string);
var h2 = url.searchParams.get("h2");

//filtering through initial array and creating a new array based on the parameters value
let filteredSections = sections.filter((section) => {
	return section.title === h2
})

//Looping through the filtered array, creating each element and displaying it to HTML by appending it
filteredSections.forEach((section) => {
	let wrappingDiv = document.createElement('div')
  
  let h1Tag = document.createElement('h1')
  h1Tag.textContent = section.title
  
  let innerDiv = document.createElement('div')
  innerDiv.textContent = section.info1
  
  let h5Tag = document.createElement('h5')
  h5Tag.textContent = section.info2
  
  let bodyTag = document.querySelector('body')
  
  //appending everything in html
  bodyTag.appendChild(wrappingDiv)
  wrappingDiv.appendChild(h1Tag)
  wrappingDiv.appendChild(innerDiv)
  wrappingDiv.appendChild(h5Tag)
})
<html>
  <body>
    <!-- Javascript will create elements here -->
  </body>
</html>

Надеюсь, это поможет. Дайте мне знать, если у вас есть вопросы по этому поводу

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...