Wrap rest of the string with span tag from the second occurrence

user_2590090 0
Viewed 40

I'm trying to wrap part of the string with span tag. i'm trying to find the second occurrence of dot . and from there the rest of the string should be wrapped in span tag.

Here is what i've been trying to do.

<h2>Blah blah blah</h2>
<p class="story">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>

JS

let getCopy = function(){
    var para = document.querySelector('.story').textContent;
    var hiddenpara = para.replace('.','<span class="hiddenText">.</span>',2)
    console.log(hiddenpara)
}

getCopy()

CSS

.hiddenText{
    display:none;
}
css javascript
3 Answers

You could create a new span element underneath the p and assign all the text after the second . to it:

const para = document.querySelector('.story')

text = para.textContent
const content = text.split('.')
para.textContent = content.splice(0, 2).join('.') + '.'
const span = document.createElement('span')
span.classList.add('hiddenText')
const spanContent = document.createTextNode(content.join('.'))
span.appendChild(spanContent)
para.appendChild(span)
.hiddenText {
  color: red;
}
<h2>Blah blah blah</h2>
<p class="story">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>

user_94737640 

let getCopy = function(){
    let cnt = 0;
    var para = document.querySelector('.story');
    var hiddenpara = para.textContent.split('.');
    hiddenpara[1] = "<span class='hidden'>" + hiddenpara[1];
    hiddenpara[hiddenpara.length - 1] = hiddenpara[hiddenpara.length - 1] + "</span>";
    para.innerHTML = hiddenpara.join('.');
}

getCopy();
.hidden {
  color: red
}
<html>
<body>
<h2>Blah blah blah</h2>
<p class="story">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
</body>
</html>

user_80378460

This would be one way to do it. Explanation within the comments of the code.

function getPosition(string, subString, index) {
  return string.split(subString, index).join(subString).length;
}

const getCopy = function(str){
  // Get position of the second dot
    const dotIndex = getPosition(str, '.', 2) + 1;
  // Split string into array at the second dot
  const strArray = [str.slice(0, dotIndex), str.slice(dotIndex)];
  
  // Add the span element
  strArray[1] = '<span class="hiddenText">'+strArray[1]+'</span>';
  
  // Join array back into a string and return it.
  return strArray.join();
}

console.log(getCopy(document.querySelector(".story").innerText));
<h2>Blah blah blah</h2>
<p class="story">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>

user_27807110
Related