Estoy en el proceso de agregar secciones "Ver más" al final de algunas de mis páginas web. Mi plan es tener algo como esto:
<h1 id="test">Unique title</h1> <h2>See more</h2> <ul> <li><a class="link" href="/people/YYYY/category1/">More1</a></li> <li><a class="link" href="/people/YYYY/category2/">More2</a></li> <li><a class="link" href="/people/YYYY/category3/">More3</a></li> <li><a class="link" href="/people/YYYY/category4/">More4</a></li> <ul> <script> let text = document.getElementById("link").innerHTML; document.getElementByClass("link").innerHTML = text.replace("YYYY", "test"); </script>He probado el script anterior pero fue en vano.
Tengo muchos cientos de estos para hacer, así que lo que busco hacer es usar Javascript para copiar el texto en la etiqueta H1 y reemplazar 'YYYY' en la URL con ese texto dentro de la misma página.
Tengo un conocimiento muy limitado de Javascript, tiendo a usar solo fragmentos de WS3, pero estoy luchando por encontrar algo para lo que necesito.
Tenga en cuenta: hay más código entre las etiquetas H1 y H2, simplemente no lo he incluido. Además, las direcciones URL en la ul son solo ejemplos.
Aquí hay una respuesta a lo que está preguntando, pero probablemente no sea la forma correcta de hacer lo que está tratando de hacer. Probablemente desee utilizar algún tipo de código de back-end o un sistema de compilación.
Para obtener el contenido de texto de una etiqueta, primero debe agregarle un atributo de id , para que sea más fácil apuntar con Javascript:
<h2 id="foo">Blah Blah</h2> Luego, puede obtener fácilmente una referencia a esa etiqueta con Javascript y luego usar la propiedad innerText para obtener el texto.
var text = document.getElementById('foo').innerText Reemplazar el texto de varios atributos href es más complicado. Primero puede obtener una referencia a ellos, sugiero usar un atributo de identificación en la etiqueta <ul> para que sea más fácil:
<ul id="special-links"> Luego puede usar querySelectorAll para encontrar las etiquetas:
var aTags = document.querySelectorAll('#special-links a') Luego recorra los que usan forEach . Para cada iteración del ciclo, use getAttribute para obtener el atributo href, luego use replace para reemplazar la porción YYYY con el valor de text que obtuvimos anteriormente, luego use setAttribute para establecer esa nueva cadena como el nuevo href.
aTags.forEach((tag) => { let href = tag.getAttribute('href') let newHref = href.replace('YYYY', text) tag.setAttribute('href', newHref) })