Como organizar conteúdo de uma div?

[zetaec 0]

Olá,

tenho a seguinte div:

<div id="filmes">

#EXTINF:-1 tvg-logo="https://2.bp.blogspot.com/-ZLv8x_vMLb8/V8p09XGSJfI/AAAAAAAABeM/tyi5GNV5Uaw8plubHLUlAOkgXKXe7zYeACLcB/s320/DEPOIS%2BDA%2BTERRA.jpg" group-title="FILMES",DEPOIS DA TERRA
https://lh3.googleusercontent.com/CGGe52-OOn_-0YDaV5seM21m7QypjNWflEUV7gxXgyGUNc6vDz9Sev9Nb3hP9bN9jUqPdzjl9Uqn=m22?

#EXTINF:-1 tvg-logo="https://1.bp.blogspot.com/-rphtA5f4OVA/V8p09uC8-gI/AAAAAAAABeQ/CBt0OsKucIwn8vFYePmejGUDjHCLZtfKACLcB/s320/DESAFIANDO%2BOS%2BLIMITES.jpg" group-title="FILMES",DESAFIANDO OS LIMITES
https://lh3.googleusercontent.com/ngjRkVXYr9_cF_0y80rxVhzelMaqM74qL3IrxKOvImpl6YfEo4mS4so4PzPtVvGU_960P5HH34Wa=m22?

#EXTINF:-1 tvg-logo="https://3.bp.blogspot.com/-zg5xxw5-_Po/V8p094mW_XI/AAAAAAAABeU/EzzrkPfZj44fkNQ0yl2Z43rgdUj8rKWRACLcB/s320/DOCE%2BVINGANCA%2B3%2BA%2BVINGANCA%2BE%2BMINHA.jpg" group-title="FILMES",DOCE VINGANCA 3 A VINGANCA E MINHA
https://lh3.googleusercontent.com/0x0kRfYRmxUKtDj0hm7AwgM9Qd4R7SZsRoOALEcjhTdj4QF0AqUAW0--BkxczOXijFyI2_e3NfV0=m22?

#EXTINF:-1 tvg-logo="https://4.bp.blogspot.com/--L7ueGijC-Y/V8p09yX_MeI/AAAAAAAABeY/D9izcadHuZMDTmeLau9XXBqea3DiF6lwwCLcB/s320/ELEKTRA.jpg" group-title="FILMES",ELEKTRA
https://lh3.googleusercontent.com/X6vFIsLU2KQ0H14qf1hiQZSuMZauEJxHZs8jAPof1_k9B-2d-cW1hFpujfAmOY_pyjipOCDsM1lt=m22?

#EXTINF:-1 tvg-logo="https://2.bp.blogspot.com/-l0hugggvfM4/V8p0-Q_v_OI/AAAAAAAABec/RKMpe1Rh7lURNn4nEOXU51czNmRLtyiZwCLcB/s320/EQUILIBRIUM.jpg" group-title="FILMES",EQUILIBRIUM
https://lh3.googleusercontent.com/HEeRvFJ9n3ipZFFNpXz0RlC1ojSM8c165Rl6jCBi9NNUCLu3UEjgujgZd7MpKxlA0T9xK9es4-J_=m22?


</div>

Onde o conteúdo da tvg-logo="" é a imagem, o "group-title" e "#EXTINF:-1" podem ser eliminados, em seguida temos o nome e depois a URL, como posso editar pra ficar nesse formato:

<a href=”URL” title=”nome”><img src=”imagem”/></a>

E depois imprimir na própria div o resultado. De texto vire imagens com links.

Não tem como fazer manualmente pois a lista é imensa.

É possível?

Estou a 3 dias tentando,

Grato! :)

[William Bruno 1501]

Pegando uma linha de exemplo:

var str = '#EXTINF:-1 tvg-logo="https://4.bp.blogspot.com/--L7ueGijC-Y/V8p09yX_MeI/AAAAAAAABeY/D9izcadHuZMDTmeLau9XXBqea3DiF6lwwCLcB/s320/ELEKTRA.jpg" group-title="FILMES",ELEKTRA\nhttps://lh3.googleusercontent.com/X6vFIsLU2KQ0H14qf1hiQZSuMZauEJxHZs8jAPof1_k9B-2d-cW1hFpujfAmOY_pyjipOCDsM1lt=m22?';
var p = str.replace(/\n/, '').match(/tvg-logo="([^"]+)" group-title="([^"]+)".*(http.*)/)

como separei em grupos, agora fica fácil montar o html:

'<a href="' + p[1] + '" title="' + p[2] + '"><img src="' + p[3] + '"/></a>'

e ai o resultado é:

'<a href="https://4.bp.blogspot.com/--L7ueGijC-Y/V8p09yX_MeI/AAAAAAAABeY/D9izcadHuZMDTmeLau9XXBqea3DiF6lwwCLcB/s320/ELEKTRA.jpg" title="FILMES"><img src="https://lh3.googleusercontent.com/X6vFIsLU2KQ0H14qf1hiQZSuMZauEJxHZs8jAPof1_k9B-2d-cW1hFpujfAmOY_pyjipOCDsM1lt=m22?"/></a>

[zetaec 0]

Funcionou, só que só para uma linha :/

Só criou uma imagem com link, as outras linhas ficaram com a mesma formatação

Mas foi o mais perto que consegui até agora, valeu :)

[William Bruno 1501]

O segredo agora, é você executar linha por linha..

quebre as diversas linhas em um array, e depois passe por esse match uma de cada vez.

[William Bruno 1501]

Exemplo:

<div id="filmes">


#EXTINF:-1 tvg-logo="https://2.bp.blogspot.com/-ZLv8x_vMLb8/V8p09XGSJfI/AAAAAAAABeM/tyi5GNV5Uaw8plubHLUlAOkgXKXe7zYeACLcB/s320/DEPOIS%2BDA%2BTERRA.jpg" group-title="FILMES",DEPOIS DA TERRA
https://lh3.googleusercontent.com/CGGe52-OOn_-0YDaV5seM21m7QypjNWflEUV7gxXgyGUNc6vDz9Sev9Nb3hP9bN9jUqPdzjl9Uqn=m22?

#EXTINF:-1 tvg-logo="https://1.bp.blogspot.com/-rphtA5f4OVA/V8p09uC8-gI/AAAAAAAABeQ/CBt0OsKucIwn8vFYePmejGUDjHCLZtfKACLcB/s320/DESAFIANDO%2BOS%2BLIMITES.jpg" group-title="FILMES",DESAFIANDO OS LIMITES
https://lh3.googleusercontent.com/ngjRkVXYr9_cF_0y80rxVhzelMaqM74qL3IrxKOvImpl6YfEo4mS4so4PzPtVvGU_960P5HH34Wa=m22?

#EXTINF:-1 tvg-logo="https://3.bp.blogspot.com/-zg5xxw5-_Po/V8p094mW_XI/AAAAAAAABeU/EzzrkPfZj44fkNQ0yl2Z43rgdUj8rKWRACLcB/s320/DOCE%2BVINGANCA%2B3%2BA%2BVINGANCA%2BE%2BMINHA.jpg" group-title="FILMES",DOCE VINGANCA 3 A VINGANCA E MINHA
https://lh3.googleusercontent.com/0x0kRfYRmxUKtDj0hm7AwgM9Qd4R7SZsRoOALEcjhTdj4QF0AqUAW0--BkxczOXijFyI2_e3NfV0=m22?

#EXTINF:-1 tvg-logo="https://4.bp.blogspot.com/--L7ueGijC-Y/V8p09yX_MeI/AAAAAAAABeY/D9izcadHuZMDTmeLau9XXBqea3DiF6lwwCLcB/s320/ELEKTRA.jpg" group-title="FILMES",ELEKTRA
https://lh3.googleusercontent.com/X6vFIsLU2KQ0H14qf1hiQZSuMZauEJxHZs8jAPof1_k9B-2d-cW1hFpujfAmOY_pyjipOCDsM1lt=m22?

#EXTINF:-1 tvg-logo="https://2.bp.blogspot.com/-l0hugggvfM4/V8p0-Q_v_OI/AAAAAAAABec/RKMpe1Rh7lURNn4nEOXU51czNmRLtyiZwCLcB/s320/EQUILIBRIUM.jpg" group-title="FILMES",EQUILIBRIUM
https://lh3.googleusercontent.com/HEeRvFJ9n3ipZFFNpXz0RlC1ojSM8c165Rl6jCBi9NNUCLu3UEjgujgZd7MpKxlA0T9xK9es4-J_=m22?
</div>
<div id="result"></div>

<script>
var filmes = document.getElementById('filmes').innerHTML.replace(/\n|\r\n/g, '');
var $result = document.getElementById('result');

var lines = filmes.split(/#EXTINF/g);

console.log('lines', lines);

lines.forEach(function(str) {
  if (!str) return

  var p = str.match(/tvg-logo="([^"]+)" group-title="([^"]+)",(.*)(http.*)/)
  if (!p) return

  $result.innerHTML += '<a href="' + p[4] + '" title="' + p[3] + '"><img src="' + p[1] + '"/></a>';
})


</script>

[zetaec 0]

Cara muito obrigado. Depois dessa resposta comecei a aprender sobre regex. Valeu